Бесплатно, без регистрации

Научись верстать страницы, а не копировать чужой код

Два курса для тех, кто открывает редактор кода впервые: от первого тега до продвинутого CSS и проектов уровня настоящей работы. Читаешь короткий кусок теории — тут же правишь живой пример и видишь результат.

Начать с первого урока Посмотреть программу
50уроков с практикой
~13 ччистого чтения
0 ₽и никакой рекламы

Путь

Два курса, идущих один за другим

Первый учит верстать. Второй — верстать так, как это делают на работе. Второй курс открыт с самого начала: если основы уже знаешь, начинай прямо с него.

Курс 1

HTML и CSS с нуля

25 уроков · С нуля, без опыта

Двадцать пять уроков от «что такое тег» до готового лендинга. Каждый урок — теория простым языком, живой пример, разбор ошибок, тест и практика с автопроверкой.

  • Первая страница
  • Смысл и структура
  • Знакомство с CSS
  • Коробки и раскладка
  • Живой современный сайт
Начать курс Вся программа
Курс 2

Кодовёрстка Про

25 уроков · После основ вёрстки

Второй курс — про то, как верстают на работе. Современный CSS, графика и эффекты, архитектура стилей, производительность и пять законченных проектов.

  • Современный CSS
  • Графика и эффекты
  • Архитектура стилей
  • Качество и производительность
  • Реальные проекты
Начать курс Вся программа

Можно начать сразу, если основы уже знаешь.

Карта

Все 50 уроков на одной дорожке

Каждый следующий урок опирается на предыдущий. Пройденные подсвечиваются — вернуться и повторить можно в любой момент.

HTML и CSS с нуля

Модуль 1

Первая страница

1 12 мин

Как устроен веб и что такое HTML

Откуда берётся страница в браузере, почему она — обычный файл на диске и как написать свою первую строчку…

html старт
2 13 мин

Скелет документа: что должно быть в каждом файле

Пять строк, которые пишут в начале любой страницы: зачем нужен doctype, откуда берутся «кракозябры» и что…

html структура
3 14 мин

Текст: заголовки, абзацы и списки

Как разложить текст по полочкам: иерархия заголовков, смысловые выделения, нумерованные и маркированные…

html текст
4 14 мин

Ссылки: как связать страницы между собой

Тег a, абсолютные и относительные пути, якоря внутри страницы, ссылки на почту и телефон — и первое настоящее…

html ссылки
5 15 мин

Картинки и медиа

Тег img и обязательный alt, подписи через figure, форматы и вес файлов, адаптивные картинки, видео и звук.

html медиа
Модуль 2

Смысл и структура

6 14 мин

Семантические теги: разметка со смыслом

header, nav, main, section, article, aside, footer — и почему div стоит держать на последнем месте.

html семантика
7 12 мин

Таблицы: когда они уместны

Как устроена таблица, зачем нужны thead, caption и scope, как объединять ячейки — и почему вёрстку таблицами…

html таблицы
8 16 мин

Формы: как сайт спрашивает

Поля всех типов, подписи через label, встроенная проверка, группировка через fieldset — и почему placeholder…

html формы
9 13 мин

Атрибуты, id и class: наводим порядок

Как устроены атрибуты, чем id отличается от class, зачем нужны data-атрибуты и как проверить разметку…

html порядок
10 15 мин

Доступность: сайт для всех

Навигация с клавиатуры, видимый фокус, контраст, alt и порядок заголовков, skip-link и первые aria-атрибуты.

html доступность
Модуль 3

Знакомство с CSS

11 13 мин

Что такое CSS и как его подключить

Три способа подключения и почему выбирают внешний файл, из чего состоит правило, и как смотреть стили в…

css старт
12 16 мин

Селекторы: как выбрать нужный элемент

По тегу, классу и id, комбинации, потомки и соседи, атрибуты, псевдоклассы и псевдоэлементы.

css селекторы
13 15 мин

Каскад: почему стиль «не работает»

Как браузер выбирает между спорящими правилами: важность, вес селектора, порядок. Плюс наследование и честное…

css каскад
14 16 мин

Цвета, единицы и переменные

HEX, RGB и HSL, прозрачность, чем rem отличается от px и em, и как собрать палитру на переменных, чтобы тема…

css значения
15 15 мин

Шрифты и типографика

Стек фолбэков, подключение Google Fonts с кириллицей, размеры и насыщенность, межстрочный интервал и длина…

css типографика
Модуль 4

Коробки и раскладка

16 15 мин

Блочная модель: из чего сделана каждая коробка

Почему элемент занимает больше места, чем ты задал, и как починить это одной строкой box-sizing.

css раскладка
17 14 мин

Поток документа и display

Почему одни элементы занимают всю строку, а другие стоят рядом, что делает inline-block и чем display: none…

css раскладка
18 15 мин

Позиционирование: выходим из потока

static, relative, absolute, fixed и sticky: от чего считаются координаты, как работает z-index и что такое…

css раскладка
19 14 мин

Фоны, рамки, тени и градиенты

Как из плоских прямоугольников сделать что-то приятное глазу: background целиком, скругления, мягкие тени…

css оформление
20 17 мин

Flexbox: раскладка вдоль оси

Одна строка превращает контейнер в гибкий ряд: выравнивание, распределение места, переносы и знаменитое flex…

css flexbox
Модуль 5

Живой современный сайт

21 17 мин

CSS Grid: настоящая сетка

Колонки и строки сразу, единица fr, repeat и minmax, именованные области — и раскладка страницы, которую…

css grid
22 16 мин

Адаптивность: один сайт для всех экранов

Мета-viewport, подход mobile-first, медиазапросы по ширине и по предпочтениям человека, clamp() и container…

css адаптив
23 16 мин

Переходы и анимации

transition и transform, кривые ускорения, @keyframes — и главное правило: анимировать дёшево можно только две…

css анимация
24 15 мин

3D и эффекты

perspective и preserve-3d, повороты по осям, filter и backdrop-filter, режимы наложения и появление блоков…

css 3d
25 18 мин

Финальный проект: лендинг с нуля

От макета к коду: порядок работы, структура файлов, именование классов, проверка по чек-листу и публикация на…

проект итог

Кодовёрстка Про

Модуль 6

Современный CSS

26 18 мин

Cascade layers: наводим порядок в каскаде

Твой CSS разросся, новое правило не применяется, и ты дописываешь !important. Слои каскада убирают эту войну…

css архитектура
27 18 мин

:has(), :is(), :where() — селекторы, которые всё изменили

Родительский селектор, о котором просили двадцать лет. Плюс два способа группировать селекторы и вложенность…

css селекторы
28 17 мин

Container queries: адаптив по контейнеру, а не по экрану

Одна карточка, которая правильно выглядит и в узком сайдбаре, и в широкой сетке — при одном и том же размере…

css адаптив
29 17 мин

Subgrid и сложные сетки

Почему кнопки в карточках стоят на разной высоте и как заставить вложенные сетки подчиняться общим строкам.

css сетки
30 16 мин

Логические свойства и многоязычность

margin-inline вместо margin-left: почему привычные стороны света ломаются на арабском и японском — и как…

css локализация
Модуль 7

Графика и эффекты

31 17 мин

SVG в вёрстке

Иконка, которая не мылится, красится из CSS и весит меньше килобайта. Разбираем SVG изнутри: viewBox…

svg графика
32 16 мин

Анимация SVG

Линия, которая рисуется сама; галочка, которая появляется штрихом; подчёркивание, растущее из-под курсора…

svg анимация
33 17 мин

Обрезка и маски: clip-path, mask, blend-mode

Диагональные секции, текст, растворяющийся к краю, и наложение цвета на фото — без графического редактора и…

css эффекты
34 16 мин

Фильтры и эффекты

Размытие, стеклянные панели и разница между drop-shadow и box-shadow, из-за которой тень вокруг прозрачной…

css эффекты
35 17 мин

Текст, который выглядит дорого

Буквица, обтекание фигур, честные переносы и вариативные шрифты. Десяток мелочей, каждая почти незаметна, а…

css типографика
Модуль 8

Архитектура стилей

36 16 мин

Именование: БЭМ и что с ним не так

Имена ломаются раньше кода. Разбираем БЭМ по-человечески, где он избыточен и как называть то, у чего названия…

css архитектура
37 17 мин

Дизайн-токены и темизация

Три уровня переменных, из-за которых третья тема добавляется без единой правки в компонентах. И почему…

css архитектура
38 16 мин

Sass: что реально нужно, а что вредно

Половина возможностей препроцессора переехала в обычный CSS. Разбираем, что осталось незаменимым, а что…

css инструменты
39 16 мин

Компонентный CSS против утилитарного

Спору десять лет. Разбираем оба подхода на одном интерфейсе, со счётчиком строк, и находим границу, где…

css архитектура
40 17 мин

Организация проекта на 5000 строк

Структура папок, порядок подключения, борьба с мёртвыми стилями и правила ревью. Всё, что отличает большой…

css архитектура
Модуль 9

Качество и производительность

41 17 мин

Почему сайт тормозит: reflow, repaint, composite

Что браузер делает между «получил CSS» и «показал картинку», какие свойства стоят дорого и как это увидеть, а…

css производительность
42 17 мин

Быстрая загрузка

Что происходит в первые две секунды, какие ресурсы блокируют показ страницы и как отдать содержимое раньше…

производительность загрузка
43 18 мин

Доступность уровня production

Основы ты уже знаешь. Здесь — то, что начинается дальше: ARIA-паттерны, управление фокусом, живые области и…

доступность aria
44 17 мин

Формы, которые не бесят

Восемь состояний одного поля, момент показа ошибки, стилизация чекбоксов без обмана и мобильная клавиатура…

формы доступность
45 16 мин

Кроссбраузерность и деградация

Сайт должен работать везде — но не обязан выглядеть одинаково. Разбираем прогрессивное улучшение, @supports и…

css совместимость
Модуль 10

Реальные проекты

46 16 мин

От макета к плану

Что делать в первый час, когда прислали макет: как его читать, где дизайнер ошибся, на какие компоненты…

практика процесс
47 20 мин

Проект: лендинг

Собираем страницу целиком: герой с диагональю, липкая навигация, карточки тарифов, вопросы без скриптов и…

проект практика
48 20 мин

Проект: дашборд

Плотный интерфейс: сайдбар, таблица с фиксированной шапкой, графики на чистом CSS, состояния загрузки и…

проект практика
49 20 мин

Проект: интернет-магазин

Каталог с фильтрами без единой строки скрипта, галерея товара на якорях, состояние «нет в наличии» и…

проект практика
50 18 мин

Финал: собираем портфолио и идём работать

Многостраничный сайт-портфолио, публикация за десять минут, что писать в резюме верстальщику и чему учиться…

проект карьера

Что ты получишь

Не «посмотрел видео», а «сделал сам»

Примеры, которые можно ломать

Код прямо в уроке редактируется. Меняешь значение — страница рядом перерисовывается. Сломать ничего нельзя, а понять — можно всё.

Сложное — наглядно

Блочная модель, каскад, флексы и гриды показаны в объёме: слои разлетаются, элементы перелетают, значения меняются ползунками.

Задания с проверкой

После теории — практика. Проверка говорит человеческим языком: не «FAIL», а «список есть, но пунктов два, а нужно три».

Сразу правильные привычки

Семантика, доступность и адаптивность идут не отдельной главой в конце, а вплетены в уроки с самого начала.

Частые вопросы

Прежде чем начать

Мне точно подойдёт, если я вообще ничего не знаю?

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

Что нужно установить?

Только бесплатный редактор кода — в первом уроке ставим VS Code. Браузер у тебя уже есть. Всё остальное можно делать прямо на этом сайте, в песочнице.

Сколько это займёт времени?

Примерно 13 часов чтения плюс столько же практики. Комфортный темп — один урок в день: за месяц пройдёшь весь курс и соберёшь свой лендинг.

Где сохраняется мой прогресс?

В твоём браузере, локально. Никакой регистрации нет и данные никуда не отправляются. Если откроешь сайт на другом устройстве, прогресс начнётся заново.

А JavaScript будет?

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