В течение интенсива ученики с нуля сверстают как минимум два макета. Учебный макет будет общим для всех, над ним вы будете работать вместе с преподавателем на вебинарах.
Помимо учебного макета будет два варианта более сложных личных макетов. Над личными макетами вы будете работать и самостоятельно, и в паре с персональным наставником.
1 раздел: вводный- Вводная лекция про роль и место верстальщика в мире веб-технологий:
› устройство веба, TCP/IP, DNS, HTTP, URL-aдреса;
› регистрация домена, выбор хостинга, настройка веб-сервера;
› взаимодействие с другими специалистами.
- Из лекции вы узнаете, что на самом деле происходит, когда вы:
› вводите в браузере адрес сайта и открываете страницу;
› регистрируете домен;
› заказываете хостинг;
› переносите сайт с хостинга на хостинг.
- Во второй части вебинара поговорим про основы HTML/CSS и вёрстки:
› Базовый синтаксис HTML и CSS.
› Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
› Немного о браузерах, браузерных движках и различиях между ними.
Практика: Выберем редактор, создадим скелеты учебного и личного проектов, создадим простейшие файлы-заготовки страниц и стилей.
Результат: Создан скелет проекта: структура папок и файлы-заготовки.
2 раздел: разметка- Cтруктура простейшего HTML-документа, базовые теги, подключение внешних ресурсов (стилей и скриптов).
- Важнейшие теги для разметки содержания: текстовые теги, ссылки, изображения, контейнеры.
- CSS-селекторы.
- Наследование, каскадность и приоритеты в CSS.
Практика: Создадим HTML-разметку нескольких разнотипных интерфейсов. Попрактикуемся использовать подходящие теги, задавать имена классов, оценивать сложность разметки. Создадим HTML-разметку учебного и личного проектов.
Результат: Готова базовая HTML-разметка страниц проекта.
3 раздел: фотошоп, графика, стили текста- Фотошоп для верстальщика. Типовые задачи, которые выполняет верстальщик в фотошопе, и как это делать эффективно.
- Форматы изображений в веб.
- Работа с фонами.
- Оформление текстов с помощью CSS.
Практика: В Фотошопе произведём замеры размеров и отступов, определим параметры шрифтов, а также нарежем изображения. Используем полученные данные для создания CSS-стилей. Зададим фоны для крупных блоков, стили для текстовых элементов: заголовков, абзацев, ссылок и т.д.
Результат: Подготовлена графика макета, готово оформление текстовых элементов4 раздел: сетки- Блочная модель документа и поток документа.
- Тонкости блочной модели.
- Как управлять потоком документа?
- Приёмы построения сеток.
Практика: Создадим несколько разнотипных сеток, например: «шапка/две колонки/подвал», «шапка/три колонки/подвал» и более сложные. Создадим сетки главной и внутренней страниц учебного и личного проектов.
Результат: Готовы сетки страниц проекта
5 раздел: декоративные элементы и мелкие детали- Позиционирование.
- Использование псевдоэлементов.
- Приёмы создания декоративных элементов.
- Создание и использование спрайтов.
Практика: Используя различные приёмы из лекции, дооформим мелкие декоративные элементы главной страницы.
Результат: Завершённая вёрстка главной страницы проекта.
6 раздел: оформление контента- Таблицы и приёмы оформления таблиц.
- Формы и приёмы оформления форм.
- Оформление сложных элементов контента: списки, подписи к изображениям, сноски, галереи, списки товаров и т.д.
Практика: Оформим блоки содержания на типовой внутренней странице учебного макета. Создадим несколько таблиц и форм, и оформим их с помощью CSS. Затем создадим и оформим несколько сложных контентных элементов.
Результат: Завершённая вёрстка внутренней страницы проекта
7 раздел: введение в JavaScript- Введение JavaScript, написание простейших скриптов с помощью фреймворка VanillaJS
Практика: Для свёрстанных проектов добавим: динамическое открытие формы, интерактивную карту.
Результат: Оживим некоторые блоки вёрстки с помощью JavaScript
8 раздел: прогрессивное улучшение- Прогрессивное улучшение.
- Критерии качества вёрстки, как отличить мастера от новичка.
- Базовая оптимизация.
- Подготовка к защите выпускного проекта.
Практика: Рассмотрим свёрстанные проекты с точки зрения критериев качества и прогрессивного улучшения, затем внесём правки и улучшим их. Оптимизируем подготовленные проекты.
Результат: Полностью завершённая, оптимизированная и «доведённая до блеска» вёрстка проекта.
(Голосов: 
