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

295

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