Вёрстка: HTML и CSS до рабочего уровня

Что значит «уметь верстать»

Взять картинку макета и получить страницу, которая выглядит так же, работает на телефоне и не разваливается при длинном тексте.

Это отдельный навык. Многие, кто уверенно пишет на JavaScript, теряются, когда надо сверстать двухколоночную раскладку руками.

Обязательные темы

Семантика. Какие теги для чего: заголовки, списки, статьи, разделы, кнопки против ссылок. Это не эстетство: от разметки зависит доступность для программ чтения с экрана и понимание страницы поисковиками.

Частая ошибка новичка — страница из одних безымянных блоков. Так видно человека, который учил только оформление.

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

Потоки и позиционирование. Как элементы располагаются по умолчанию, чем строчный отличается от блочного, как работают режимы позиционирования.

Раскладка. Два современных механизма для расстановки элементов — им посвящена отдельная статья. Старые способы через обтекание знать необязательно, но узнавать в чужом коде полезно.

Селекторы и приоритеты. Почему правило не применилось — половина случаев в приоритете селекторов.

Работа с текстом. Размеры, интерлиньяж, переносы, поведение при длинных словах.

Что важно на практике

Единицы измерения. Когда пиксели, когда относительные величины, когда доли от размера экрана. Ошибка с ними — самая частая причина того, что вёрстка ломается при изменении размера шрифта в системе.

Переменные. Позволяют не разносить одно и то же значение по всему файлу.

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

Что проверяют на собеседовании

• Сверстать раскладку по картинке — самое частое задание.
• Объяснить блочную модель. Простой вопрос, на котором плывут удивительно многие.
• Разница между способами позиционирования.
• Как сделать элемент по центру. Классика, и вариантов ответа несколько.
• Почему стиль не применяется. Проверяют понимание приоритетов.

Как тренироваться

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

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

Проверяйте на настоящем телефоне. Уменьшенное окно браузера врёт: там нет ни касаний, ни настоящих шрифтов, ни особенностей мобильных браузеров.

Ломайте специально. Вставьте очень длинное слово, замените картинку на отсутствующую, растяните окно. Вёрстка, которая держится при этом, — рабочая.

Сколько это занимает

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