О курсе

Курс «Современная вёрстка» — продвинутая программа по HTML и CSS, состоящая из восьми уроков. Первые занятия посвящены Flexbox: рассматриваются приёмы работы с flex-grow, выравнивание элементов, эмуляция сетки и вопрос использования кода без media-запросов. Далее изучается CSS Grid Layout — от основ и сравнения с Flexbox до практической вёрстки внешнего каркаса и сложных элементов, включая функции minmax, auto-fill и fr, а также сочетание Grid и Flexbox.

Отдельный блок посвящён инструментам сборки и организации кода. Разбирается сборка проекта с помощью Vite, основы npm, структура проекта, плагины Vite и настройка PostCSS. Рассматривается концепция чистой вёрстки: семантические классы, архитектурные слои, выделение общих классов, сравнение BEM и модульного CSS. Затрагиваются способы борьбы с дублирующимся кодом, использование препроцессоров (less, scss и других), сравнение mixins и extends, а также инструмент Smartgrid.

Завершающая часть программы знакомит с атомарными классами и Tailwind: подключение и настройка, шаблонизация HTML через pug, вёрстка с Tailwind и адаптивные подходы. В конце курса предусмотрены подведение итогов, разбор финальных домашних заданий и темы для дальнейшего развития.

Что рассматривается в программе

  • рассматриваются приёмы и нюансы Flexbox, включая flex-grow и выравнивания
  • разбирается CSS Grid Layout: контейнер, строки и столбцы, именованные зоны, minmax, auto-fill и fr
  • изучается сочетание Grid Layout и Flexbox при вёрстке сложных элементов
  • разбирается сборка проекта с Vite, основы npm, структура проекта и плагины
  • рассматривается настройка PostCSS и использование препроцессоров (less, scss и других)
  • обсуждаются подходы к организации кода: семантические классы, архитектурные слои, BEM и модульный CSS
  • разбирается работа с атомарными классами и Tailwind, включая адаптивную вёрстку
  • затрагивается шаблонизация HTML с помощью pug

Кому может быть полезен курс

  • тем, кто уже освоил базу HTML и CSS и умеет верстать простые страницы
  • тем, кто хочет ознакомиться с современными технологиями и подходами в вёрстке
  • специалистам, которые не удовлетворены качеством или скоростью своей вёрстки и хотят изучить продвинутые приёмы
  • разработчикам, интересующимся организацией кода, сборкой проектов и инструментами вроде Vite и Tailwind

Вопросы о программе

Для кого предназначен этот курс?

Курс рассчитан на тех, кто уже освоил базу HTML и CSS и умеет верстать простые странички, но хочет изучить современные технологии и подходы, а также повысить качество и скорость своей вёрстки.

Какие темы рассматриваются в программе?

В программе рассматриваются Flexbox и CSS Grid Layout, сборка проекта с Vite, работа с npm, настройка PostCSS, препроцессоры, организация кода (семантические классы, BEM, модульный CSS), атомарные классы и Tailwind, а также шаблонизация HTML через pug.

Сколько уроков в курсе?

Программа состоит из восьми уроков, каждый из которых посвящён определённой теме — от хитростей Flexbox до адаптивной вёрстки с Tailwind и подведения итогов.

Нужно ли уже уметь верстать перед прохождением курса?

Да, курс предназначен для тех, кто уже освоил базу HTML и CSS и умеет верстать простые страницы. Программа является продвинутой и предполагает наличие начальных навыков.