Вёрстка без магии

Начинаем с файла и браузера. Разбираем, как теги складываются в дерево документа и почему семантика решает, что услышит поисковик и программа чтения с экрана.

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

Нормальный поток — состояние по умолчанию, и большинство странностей объясняется именно им. Разбираем схлопывание отступов, четыре вида позиционирования и порядок наложения слоёв.

Flexbox для рядов и колонок. Учимся читать поведение элемента через оси, свободное место и три свойства растяжения, а не подбирать значения наугад.

Grid для двумерных раскладок: каталог, галерея, сложная шапка. Задаём сетку строками и колонками, называем области и собираем страницу без лишних обёрток.

Шрифт из макета переносим на страницу: форматы файлов, начертания, запасные варианты. Разбираем размер, интерлиньяж и длину строки — от них зависит читаемость.

Контрольные точки берём из макета, а не из списка популярных устройств. Гибкие размеры позволяют написать меньше медиазапросов и получить предсказуемый результат на любой ширине.

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

Проходим страницу только с клавиатуры, проверяем контраст текста и слушаем, что читает скринридер. Большая часть правок оказывается простой, если знать, что искать.

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

Финальный модуль: раскладываем файлы, шрифты и изображения по папкам, проходим чек-лист перед публикацией и по шагам выкладываем готовую страницу в интернет.