Курс
Кодовёрстка Про
Второй курс — про то, как верстают на работе. Современный CSS, графика и эффекты, архитектура стилей, производительность и пять законченных проектов.
25 уроков · 430 минут чтения · После основ вёрстки
Современный CSS
Слои каскада, родительский селектор, запросы к контейнеру, subgrid и логические свойства — то, что изменило вёрстку за последние годы.
Cascade layers: наводим порядок в каскаде
Твой CSS разросся, новое правило не применяется, и ты дописываешь !important. Слои каскада убирают эту войну…
:has(), :is(), :where() — селекторы, которые всё изменили
Родительский селектор, о котором просили двадцать лет. Плюс два способа группировать селекторы и вложенность…
Container queries: адаптив по контейнеру, а не по экрану
Одна карточка, которая правильно выглядит и в узком сайдбаре, и в широкой сетке — при одном и том же размере…
Subgrid и сложные сетки
Почему кнопки в карточках стоят на разной высоте и как заставить вложенные сетки подчиняться общим строкам.
Логические свойства и многоязычность
margin-inline вместо margin-left: почему привычные стороны света ломаются на арабском и японском — и как…
Графика и эффекты
SVG изнутри, анимация контуров, обрезка и маски, фильтры и типографика, которая выглядит дорого.
SVG в вёрстке
Иконка, которая не мылится, красится из CSS и весит меньше килобайта. Разбираем SVG изнутри: viewBox…
Анимация SVG
Линия, которая рисуется сама; галочка, которая появляется штрихом; подчёркивание, растущее из-под курсора…
Обрезка и маски: clip-path, mask, blend-mode
Диагональные секции, текст, растворяющийся к краю, и наложение цвета на фото — без графического редактора и…
Фильтры и эффекты
Размытие, стеклянные панели и разница между drop-shadow и box-shadow, из-за которой тень вокруг прозрачной…
Текст, который выглядит дорого
Буквица, обтекание фигур, честные переносы и вариативные шрифты. Десяток мелочей, каждая почти незаметна, а…
Архитектура стилей
Именование, дизайн-токены и темы, Sass по делу, компоненты против утилит и порядок в проекте на пять тысяч строк.
Именование: БЭМ и что с ним не так
Имена ломаются раньше кода. Разбираем БЭМ по-человечески, где он избыточен и как называть то, у чего названия…
Дизайн-токены и темизация
Три уровня переменных, из-за которых третья тема добавляется без единой правки в компонентах. И почему…
Sass: что реально нужно, а что вредно
Половина возможностей препроцессора переехала в обычный CSS. Разбираем, что осталось незаменимым, а что…
Компонентный CSS против утилитарного
Спору десять лет. Разбираем оба подхода на одном интерфейсе, со счётчиком строк, и находим границу, где…
Организация проекта на 5000 строк
Структура папок, порядок подключения, борьба с мёртвыми стилями и правила ревью. Всё, что отличает большой…
Качество и производительность
Почему сайт тормозит, как он загружается, доступность уровня production, формы и кроссбраузерность.
Почему сайт тормозит: reflow, repaint, composite
Что браузер делает между «получил CSS» и «показал картинку», какие свойства стоят дорого и как это увидеть, а…
Быстрая загрузка
Что происходит в первые две секунды, какие ресурсы блокируют показ страницы и как отдать содержимое раньше…
Доступность уровня production
Основы ты уже знаешь. Здесь — то, что начинается дальше: ARIA-паттерны, управление фокусом, живые области и…
Формы, которые не бесят
Восемь состояний одного поля, момент показа ошибки, стилизация чекбоксов без обмана и мобильная клавиатура…
Кроссбраузерность и деградация
Сайт должен работать везде — но не обязан выглядеть одинаково. Разбираем прогрессивное улучшение, @supports и…
Реальные проекты
Пять законченных работ: от чтения макета до лендинга, дашборда, магазина и портфолио, с которым идут на собеседование.
От макета к плану
Что делать в первый час, когда прислали макет: как его читать, где дизайнер ошибся, на какие компоненты…
Проект: лендинг
Собираем страницу целиком: герой с диагональю, липкая навигация, карточки тарифов, вопросы без скриптов и…
Проект: дашборд
Плотный интерфейс: сайдбар, таблица с фиксированной шапкой, графики на чистом CSS, состояния загрузки и…
Проект: интернет-магазин
Каталог с фильтрами без единой строки скрипта, галерея товара на якорях, состояние «нет в наличии» и…
Финал: собираем портфолио и идём работать
Многостраничный сайт-портфолио, публикация за десять минут, что писать в резюме верстальщику и чему учиться…