KursSliv
0Корзина
КурсыАдминистрирование и программированиеДмитрий Лаврик Современная вёрстка 2023

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

Дмитрий Лаврик Современная вёрстка 2023 скриншот на облаке
Дмитрий Лаврик Современная вёрстка 2023
Дмитрий Лаврик Современная вёрстка 2023
Дмитрий Лаврик Современная вёрстка 2023 слив курса
  • Автор / Школа: Дмитрий Лаврик, 2023
  • Категория: Администрирование и программирование
  • Скачать: Облако Google / Yandex / Mail
  • Торрент (torrent): нет
  • Бесплатно 1 урок: по запросу

О курсе

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


Отзывы



Кликните на изображение чтобы обновить код, если он неразборчив