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

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

Продвинутая программа по HTML и CSS

Изучаем безальтернативные темы Flexbox и Grid Layout, осваиваем прикладные инструменты, а затем разбираемся в битве различных подходов к организации кода.

Программа курса:
Урок 1

Хитрости и нюансы Flexbox
Фокусы flex-grow
Идеальные выравнивания
Код без media-запросов: за и против
Эмуляция сетки на flex
Урок 2

CSS Grid Layout - основы
Grid Layout vs Flexbox
Контрейнер, строки и столбцы
Управление размерами элементов
Создание именованных зон
Урок 3

CSS Grid Layout - практика
Вёрстка внешнего каркаса
Примеры сложных элементов
Магия minmax, auto-fill и fr
Сочетание Grid Layout и Flexbox
Урок 4

Сборка проекта с Vite
Основы работы с npm
Организация структуры проекта
Основные плагины для Vite
Настройка Postcss
Урок 5

Концепция чистой вёрстки
Семантические классы
Архитектурные слои кода
Выделение общих классов
BEM vs модульный CSS
Урок 6

Борьба с дублирующимся кодом
Vite + препроцессоры
Простое использование less ( scss etc )
Mixins vs Extends
Smartgrid для быстрой сетки
Урок 7

Переход на тёмную сторону
Концепция атомарных классов
Подключение и настройка Tailwind
Шаблонизация html – pug
Вёрстка с Tailwind
Урок 8

Tailwind и адаптивная вёрстка
Как выбирать подход для проекта
Подведение итогов
Разбор финальных ДЗ
Темы для дальнейшего развития