Введение и основные понятия
1. ООП, DOM, HTML теги/аттрибуты
2. CSS селекторы, свойства
Структура HTML документа
1. Обязательные HTML теги
2. Базовые HTML теги и CSS свойства
3. Атрибуты тегов
Работа в IDE. Консоль разработчика
1. Основа работы в IDE на примере VSCode
2. Обзор необходимых плагинов для IDE
3. Работа в Chrome developer tools
Стилизация элементов, типовые решения в HTML/CSS верстке
1. Нормализация и сброс стилей
2.Приемы позиционирования элементов
3.Псевдоклассы, псевдоэлементы
4.Sticky header/footer
Разбор Типового проекта
1. Структура типового проекта
2.Обзор сборщиков: gulp/grunt/webpack
3.Препроцессоры SASS/LESS
Работа с графическими редакторами
1. Работа с графическим редактором: Photoshop/Sketch/Figma
2. Нарезка картинок в графическом редакторе
Обзор сборщиков кода
1. Самые популярные сборщики и их конфигурирование: gulp/grunt/webpack
Инструменты коммандной работы (Git, Jira, Confluence)
1. Git, описание процесса Git flow
2. JIRA, Confluence
Методологии разработки. Верстка под различные устройства
1. Методологии БЭМ, SMACSS, OSCSS
2. Респонсив верстка
3. Адаптивная верстка
Дополнительные инструменты для HTML/CSS верстки
1. Pixel perfect верстка, плагин PerfectPixel
2. Работа со шрифтами
3. Работа с SVG иконками
CSS фреймворки, сетки
1. Обзор самых популярных фреймворков
2. Детальный разбор Bootstrap компонентов
3. Работа с сеткой: css grid, flexbox grid
Препроцессоры CSS, CSS3 transitions/animations
1. SASS, LESS Препроцессоры
2. Обзор основных свойств для CSS3 анимации
3. Анимация с помощью keyframes
Инструменты контроля качества кода
1. Сsslint, eslint, prettify.
2. Внедрение контроля кода в скрипты сборщиков grunt/gulp/webpack
Основы Javascript для HTML/CSS верстки
1. Основные свойства и методы DOM элементов
2. Управление стилизацией элементов с помощью Javascript
3. Создание компонента карусели изображений
Тестовий проект
1.Разобьем готовый дизайн проекта на составные части
2. Разделим части между всеми учениками
3. Будем вести паралельную разработку
4. В конце проведем прием верстки со стороны заказчика
Подготовка к собеседованию
1. Составление CV
2. Выкладывание своего кода на Github
3. Советы, как готовиться к устному собеседованию
4. Решение самых популярных задач по HTML/CSS верстке для собеседования
