Описание

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