Дмитрий Лаврик - Современная вёрстка (2023)

Продвинутая программа по 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 и адаптивная вёрстка
• Как выбирать подход для проекта
• Подведение итогов
• Разбор финальных ДЗ
• Темы для дальнейшего развития