1. Старт
Познакомимся с преподавателями, наставниками и учебным процессом на курсе. Рассмотрим устройство веба и чем вы будете заниматься на работе. Установим и настроим инструменты для работы.
- Познакомимся со структурой курса, сделаем обзор личных проектов и критериев качества, по которым они будут оцениваться.
- Узнаем, кто такие авторы, кураторы и наставники курса.
- Поговорим о том, из чего состоят сайты, кто и как их делает, и за что в этом процессе отвечает верстальщик.
- Посмотрим на инструменты для работы на курсе: редакторы графики и кода, браузеры и отладчики, систему контроля версий.
- Разберём процесс работы над проектом и его защиту.
2. Разметка
Создадим семантичную, доступную и выразительную разметку страниц проектов по макету.
- Познакомимся с синтаксисом HTML, погрузимся в тонкости тегов и их атрибутов, поговорим о семантике.
- Посмотрим, как работает спецификация, разберём категории тегов и правила их вкладывания, разберём сложные случаи разметки.
- Познакомимся с интерфейсом Figma, научимся анализировать макет и выделять из него уникальные и повторяющиеся блоки.
- Научимся выстраивать базовую структуру страницы и использовать классы для именования блоков.
3. Графика
Экспортируем графику из макета.
- Изучим интерфейс Figma и научимся снимать с макета параметры блоков и текста.
- Разберёмся в форматах графики, научимся выбирать правильный формат, экспортировать и оптимизировать изображения.
- Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере графики.
4. Базовая стилизация
Выполним базовую стилизацию страниц проекта.
- Научимся создавать файловую структуру проекта, использовать относительные пути к ресурсам на примере стилевых файлов.
- Погрузимся в основы CSS и разберёмся, что такое наследование, каскад и специфичность.
- Внедрим контентную и декоративную графику на страницы проекта.
- Подключим шрифты, поработаем с типографикой и зададим фоны элементам.
5. Сетки страниц на флексах
Построим крупные сетки страниц с помощью флексов.
- Разберёмся в боксовой модели и познакомимся с типами боксов.
- Научимся анализировать сетки на макетах и определять крупные сетки страниц.
- Познакомимся со спецификацией Flexible Box Layout: оси флексов, их направление и расположение вдоль них флекс-элементов; растяжение, сужение и базовый размер флексов.
6. Сетки компонентов на флексах
Создадим мелкие сетки компонентов страниц при помощи флексов.
- Разберём особенности мелких сеток.
- Узнаем, что такое переполнение и как с ним справиться при помощи флексов.
- Поговорим про тонкости и ограничения флексов: порядок флекс-элементов, многострочный флекс-контейнер и расположение строк внутри него.
7. Сетки компонентов на гридах
Создадим мелкие сетки компонентов страниц при помощи гридов.
- Познакомимся со спецификацией Grid Layout: основные понятия, устройство шаблонов (строки, колонки, линии, области), ручная и автоматическая раскладка, многослойность в гриде, баги и ограничения гридов.
- Разберём типовые ситуации, когда гриды подходят лучше флексов.
- Поговорим про совместное использование гридов и флексов, рассмотрим преимущества и недостатки каждой технологии.
8. Декоративные элементы
Добавим на страницы проектов мелкие декоративные и иконочные графические элементы. Стилизуем текстовые блоки, декоративные элементы внутри сеток компонентов, кнопки и ссылки.
- Научимся использовать оформительскую и программируемую графику.
- Научимся стилизовать блоки при помощи двумерных трансформаций, рамок, теней и градиентов.
- Рассмотрим псевдоэлементы и точечное позиционирование элементов.
- Погрузимся в тонкости типографики и визуальные правила оформления контента.
- Научимся стилизовать интерактивные состояния ссылок и кнопок.
9. Попапы, слайдеры, формы
Сверстаем всплывающие элементы. Разберём приёмы стилизации форм и их элементов. Рассмотрим состояния и позиционирование элементов на странице.
- Научимся оформлять нестандартные элементы форм.
- Разберёмся с тем, как встраивать модальные окна и выпадающие элементы на страницу.
- Научимся стилизовать интерактивные состояния компонентов форм и слайдеров.
Первая неделя защиты
Завершение работы над проектом и подготовка к итоговой защите.
10. Подготовка к защите
Проверим проект на соответствие критериям качества и подготовим его к публикации.
- Доработаем доступность и интерактивность интерфейса.
- Протестируем контент на изменение количества и размеров элементов, текста и графики.
- Проверим проект на соответствие макету и стайлгайду.
Вторая неделя защиты
Первая оценка проекта проверяющим наставником по критериям качества.
Третья неделя защиты
Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
Четвёртая неделя защиты
Внесение финальных правок и получение итоговой оценки.
11. Финал
Поговорим о том, как прошёл курс и куда вам двигаться дальше.
- Сделаем обзор статистики по студентам и проектам.
- Обсудим, что вы узнали в процессе курса и что уже можете делать.
- Поговорим о вариантах вашего дальнейшего развития.