Верстальщик: чем занимается специалист, какие навыки нужны и как учиться

Главное заблуждение новичков — считать, что вёрстка сводится к переносу картинки «пиксель в пиксель». Дизайнер обычно рисует два-три состояния страницы, например для экранов шириной 1440 и 375 пикселей. Всё, что происходит между ними, решает верстальщик: куда уходит меню на ширине 800 пикселей, что будет с заголовком в три строки вместо одной и увидит ли человек, на какой кнопке он находится, если листает страницу клавишей Tab.

Чем занимается веб-верстальщик

Работа начинается с разбора макета. Верстальщик выписывает повторяющиеся элементы — кнопки, карточки, поля форм — и решает, какие из них станут общими компонентами. Затем размечает содержимое смысловыми тегами: шапка, навигация, заголовки по уровням, списки, подписи к полям. После этого пишет стили: сетку на Grid или Flexbox, отступы, шрифты, состояния кнопок при наведении, нажатии и фокусе.

Дальше идёт проверка. Страницу открывают в нескольких браузерах и на телефонах и ищут, где ломается сетка. Готовую вёрстку передают фронтенд-разработчику, который подключит данные и логику, или переносят в CMS. В небольших студиях верстальщик сам ставит шаблон на WordPress или 1С-Битрикс, а в продуктовых компаниях вёрсткой обычно занимаются фронтенд-разработчики, и отдельного верстальщика зовут на лендинги, промостраницы и рассылки.

Письма и печатные издания

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

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

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

Ситуация учебная. В макете лендинга фитнес-клуба есть блок «Тарифы»: три карточки с ценой, списком услуг и кнопкой «Купить», сверху переключатель «Месяц / Год». На десктопе карточки стоят в ряд, на телефоне — друг под другом.

Верстальщик начинает с вопросов. Что будет, если у тарифа окажется не четыре пункта, а семь? Должны ли кнопки трёх карточек стоять на одной линии? Что показывать на планшете? Получив ответы, он даёт каждой карточке заголовок h3, услуги размечает — настоящим списком, а переключатель — двумя связанными радиокнопками, чтобы его можно было выбрать с клавиатуры и услышать в экранном дикторе.

Раскладку он делает на Grid с автоматическим числом колонок: три карточки в ряд на широком экране, две на среднем, одна на узком. Кнопку прижимает к низу карточки, и ряд не разъезжается при разном числе пунктов. Затем проходит блок клавишей Tab, увеличивает масштаб до 200 % и вставляет длинное название тарифа. Такой блок переживает правки контент-менеджера и не требует макета под каждую ширину.

Чем верстальщик отличается от соседей

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

Фокус и масштаб: где ошибаются на большинстве сайтов

Насколько часто вёрстку делают без оглядки на клавиатуру и увеличение, видно по главе о доступности Web Almanac 2025 от HTTP Archive, опубликованной 15 января 2026 года. Данные взяты из июльского обхода 2025 года, который, согласно описанию методики, охватил более 16 миллионов сайтов. Правило :focus { outline: 0; }, убирающее стандартную рамку вокруг элемента в фокусе, встречается на 67 % страниц — и в десктопной, и в мобильной выборке. Селектор :focus-visible, который показывает рамку при навигации с клавиатуры, используют лишь около четверти страниц: 25 % на компьютерах и 24 % на телефонах. А 19 % мобильных сайтов запрещают масштабирование через user-scalable=no или ограничивают максимальный масштаб.

За этими цифрами стоят две привычки, которые легко приобрести в первые месяцы работы. Рамку фокуса считают некрасивой и убирают одной строкой в сбросе стилей. После этого человек без мыши нажимает Tab и не видит, где находится: на ссылке, в поле формы или уже на кнопке оплаты, хотя видимый фокус требует критерий 2.4.7 WCAG. Масштабирование запрещают, чтобы вёрстка «не разъезжалась», и слабовидящий человек не может увеличить мелкий текст двумя пальцами.

Исправить это дешевле, чем кажется. Рамку не удаляют, а перерисовывают: задают стиль для :focus-visible в цветах бренда и согласуют его с дизайнером как ещё одно состояние кнопки. Из метатега viewport убирают запрет масштабирования и проверяют вёрстку на увеличении до 200 %.

Что может оказаться сложным

Первое — рутина: одни и те же проверки на разных ширинах и в разных браузерах, правки уже «готовой» страницы. Второе — зависимость от чужих решений: макет без мобильной версии или без состояний ошибки приходится достраивать и согласовывать. Третье — граница профессии. Вёрстка без JavaScript всё чаще входит в работу фронтенд-разработчика, и тому, кто хочет расти, придётся осваивать логику страниц.

С чего начать и в каком порядке учиться

Порядок ниже идёт от разметки к поведению страницы. Без понимания тегов CSS превращается в набор заплаток, без блочной модели Flexbox и Grid кажутся магией, а адаптивность и доступность имеет смысл осваивать, когда вы уверенно собираете статичный блок. Git и JavaScript стоят в конце, потому что им проще учиться на собственной вёрстке.

1. Смысловая разметка HTML: заголовки, списки, ссылки, формы с подписями, атрибут alt.
2. Основы CSS: селекторы, каскад, блочная модель, единицы измерения.
3. Flexbox и Grid, медиазапросы, «резиновые» размеры.
4. Работа с макетом в Figma: размеры, шрифты, цвета, выгрузка изображений.
5. Доступность: фокус, клавиатура, контраст, масштаб, проверка в Lighthouse.
6. Git и публикация на GitHub Pages, затем базовый JavaScript и Sass.

Первые три пункта реально пройти по бесплатным справочникам и в песочнице вроде CodePen. Когда понадобятся система и проверка заданий, присмотритесь к онлайн-курсу Skillbox «Верстальщик»: за шесть месяцев на нём выполняют 33 учебных и приближенных к коммерческим проекта, проходят Flexbox, Grid, формы, адаптивную вёрстку, Sass и БЭМ, проверяют скорость в Lighthouse, а домашние задания смотрят кураторы. JavaScript дан бонусным блоком, и в обзоре прямо сказано, что для фронтенда этого мало.

Как показать первые результаты

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

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

Сколько зарабатывает верстальщик

Свежие проверяемые данные есть в отчёте Хабр Карьеры о зарплатах в IT за первое полугодие 2026 года, опубликованном 21 июля 2026 года. Он построен на 45 226 анкетах из зарплатного калькулятора, то есть на суммах, которые называют сами специалисты, а не на предложениях работодателей. Средняя зарплата HTML-верстальщиков, по отчёту, выросла на 7 % ко второму полугодию 2025 года и достигла 80 000 рублей. Это показатель по России в целом и по всем уровням; медиана по IT там же — 191 000 рублей.

На доход влияют город, работа с CMS и email-вёрстка как дополнительные услуги, у фрилансеров — загрузка и комиссия биржи. Сопоставимой свежей статистики по верстальщикам печатных изданий найти не удалось. Чтобы оценить рынок самостоятельно, отфильтруйте вакансии по городу и опыту, смотрите медиану, а не крупнейшие цифры, и проверяйте, указана сумма до вычета налога или на руки.

Как выбрать обучение и куда расти дальше

Перед оплатой проверьте, есть ли в программе работа по настоящим макетам, кто проверяет код и разбирают ли адаптивность и доступность. Недорогой способ понять, ваше ли это, — курс Purple School «HTML и CSS: вёрстка с нуля»: в 23 базовых модулях от семантики и доступности до Grid, медиазапросов и работы с Figma собраны 226 видеоуроков, 19 упражнений и 79 тестов, первые три модуля открыты бесплатно. JavaScript в программу не входит, наставник есть только на старшем тарифе, а цены и условия стоит уточнить у школы.

Если тянет к печатной вёрстке, курс по HTML не поможет: понадобятся InDesign, типографика и понимание того, как макет попадает в типографию. Решите заранее, нужен ли вам диплом о переподготовке.

Тем, кто хочет совместить печать и интерфейсы, подойдёт переподготовка, например «Графический дизайн. Расширенный курс» НИИДПО: 1010 академических часов, из них InDesign — 50, основы вёрстки — ещё 50, типографика — 48, по итогам выдают диплом о переподготовке с квалификациями «Графический дизайнер» и «Графический дизайнер интерфейсов». В обзоре отмечено, что портфолио и работа с заказчиком в перечне дисциплин не упоминаются, адаптив не назван, а лицензии Adobe для России закрыты.

Для веб-верстальщика следующий шаг обычно фронтенд: JavaScript глубже бонусного блока, TypeScript, React, работа с API.

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