Программа и содержание
Курс предназначен для тех, кто
Освоил базу HTML и CSS, умеет верстать простые странички
Недоволен качеством / скоростью своей вёрстки
Хочет изучить современные технологии и подходы
Продвинутая программа по HTML и CSS
Изучаем безальтернативные темы Flexbox и Grid Layout, осваиваем прикладные инструменты, а затем разбираемся в битве различных подходов к организации кода.
Программа курса:
21.02 – урок 1
Хитрости и нюансы Flexbox
Фокусы flex-grow
Идеальные выравнивания
Код без media-запросов: за и против
Эмуляция сетки на flex
24.02 – урок 2
CSS Grid Layout - основы
Grid Layout vs Flexbox
Контрейнер, строки и столбцы
Управление размерами элементов
Создание именованных зон
28.02 – урок 3
CSS Grid Layout - практика
Вёрстка внешнего каркаса
Примеры сложных элементов
Магия minmax, auto-fill и fr
Сочетание Grid Layout и Flexbox
03.03 – урок 4
Сборка проекта с Vite
Основы работы с npm
Организация структуры проекта
Основные плагины для Vite
Настройка Postcss
07.03 – урок 5
Концепция чистой вёрстки
Семантические классы
Архитектурные слои кода
Выделение общих классов
BEM vs модульный CSS
10.03 – урок 6
Борьба с дублирующимся кодом
Vite + препроцессоры
Простое использование less ( scss etc )
Mixins vs Extends
Smartgrid для быстрой сетки
14.03 – урок 7
Переход на тёмную сторону
Концепция атомарных классов
Подключение и настройка Tailwind
Шаблонизация html – pug
Вёрстка с Tailwind
17.03 – урок 8
Tailwind и адаптивная вёрстка
Как выбирать подход для проекта
Подведение итогов
Разбор финальных ДЗ
Темы для дальнейшего развития