Курсы и обучение вёрстке: HTML и CSS с нуля за 3 месяца

Что такое вёрстка и что входит в навык

Вёрстка отвечает за то, чтобы картинка из Figma превратилась в страницу, которая одинаково открывается на ноутбуке дизайнера и на пятилетнем Android. Верстальщик берёт макет и собирает разметку на HTML, описывает внешний вид на CSS, следит за отступами, шрифтами и поведением блоков при изменении ширины экрана. Отсюда и ответ на вопрос, кто это такой: специалист по внешнему слою сайта, а не по его логике.

Слово «вёрстка» тянет за собой две разные профессии, и их постоянно путают при выборе курса. Веб-вёрстка — про HTML, CSS и браузеры. Полиграфическая вёрстка — про книги, журналы и газеты, там работают в Adobe InDesign, а результат уходит в типографию. Программы у них не пересекаются почти нигде. Этот раздел каталога — про веб; если вам нужны книги и полиграфия, идите в подборку по InDesign.

Внутри веб-вёрстки навык тоже делится. Базовая часть: семантическая разметка, блочная модель, селекторы, каскад. Дальше идут раскладки (Flexbox и Grid), адаптивная вёрстка под разные экраны, кроссбраузерность и доступность. На верхних этажах идут препроцессоры, методология БЭМ, сборщики и связка с JavaScript.

Важный нюанс: вёрстка редко продаётся как отдельная профессия, но входит в требования почти к любой frontend-вакансии. Даже если вы целитесь в React, собеседование начнётся с вопросов про позиционирование и специфичность селекторов. Подробный разбор самого навыка мы собрали в статье «Вёрстка: что это такое и как верстать сайты грамотно».

Что изучают на курсах вёрстки: HTML5, CSS3, Flexbox и Grid

Программы разных школ отличаются глубиной, но ядро у них общее, и для начинающих оно везде одинаковое. Сначала HTML5: структура документа, семантические теги вроде header, main и article, формы, таблицы, работа с изображениями и видео без сторонних плагинов. Затем CSS3: селекторы и их специфичность, каскад и наследование, блочная модель, единицы измерения, работа со шрифтами и цветом.

Дальше начинается то, ради чего курс обычно и покупают. Flexbox раскладывает элементы в одну линию: меню, ряды карточек, шапки и подвалы. CSS Grid держит двумерные сетки: страницы с колонками, галереи, сложные дашборды. Медиазапросы отвечают за адаптивность, а подход mobile first задаёт порядок, в котором вы описываете стили.

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

На продвинутых программах появляются препроцессоры Sass и Less, методология БЭМ, CSS-фреймворки Bootstrap и Tailwind, анимации и переходы, базовая оптимизация скорости, доступность интерфейса для скринридеров. Финальная работа почти везде одинаковая: собрать лендинг или многостраничный сайт по макету и защитить его перед наставником.

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

Ещё один маркер зрелой программы, разговор про инструменты разработчика. DevTools в браузере показывают, как посчиталась итоговая ширина элемента и какое правило перебило ваше; Emmet сокращает набор разметки в разы; Git превращает домашки в историю проекта, которую можно показать работодателю. Курсы, где про это не сказано ни слова, оставляют выпускника наедине с редактором и копипастой.

Программа обучения по этапам: от первого тега до адаптивного макета

Если разложить типичный курс вёрстки с нуля по неделям, получается четыре ступени. Сроки ниже рассчитаны на темп в 8–10 часов занятий в неделю, то есть на человека, который учится после работы.

Итого 3–4 месяца до состояния, когда вы берёте чужой макет и уверенно доводите его до рабочей страницы. Ускорить можно, но за счёт объёма практики, а именно практика решает на собеседовании.

Дальше развилка. Тем, кто идёт во frontend, после вёрстки нужен JavaScript — ещё 4–6 месяцев до уверенного джуна. Тем, кто верстает лендинги на заказ, полезнее добить Bootstrap, анимации и работу с CMS.

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

Отдельно закладывайте время на отладку. У новичка на «почему этот блок уехал вправо» уходит больше часов, чем на изучение новых свойств, и это нормальная часть ремесла. Курсы, где домашки проверяет живой наставник, сокращают этот этап в разы: одно точное замечание про схлопывание отступов экономит вечер поисков.

Сколько стоят курсы вёрстки и сколько длится обучение

Разброс по каталогу большой: от 900 ₽ до 500 000 ₽, медиана — 62 600 ₽. Цена почти не говорит о качестве самой программы, зато хорошо показывает, сколько человеческого внимания вы получите.

Дорогие программы редко продают именно вёрстку. Обычно это трек на frontend-разработчика или веб-разработчика, где вёрстка занимает первые два месяца, а остальное время уходит на JavaScript, фреймворки и стажировку. Если вы хотите научиться верстать, а не сменить профессию, переплачивать за карьерный центр смысла нет.

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

Ещё одна статья расходов, о которой не пишут в описании программы. Нужен компьютер, который тянет браузер с открытыми DevTools и Figma одновременно, аккаунт в Figma (бесплатного тарифа хватает), учебная лицензия на редактор не требуется — VS Code бесплатен. Домен и хостинг для выпускного проекта обойдутся в пару сотен рублей в год, а разместить портфолио можно и бесплатно на GitHub Pages. То есть к стоимости курса добавлять почти нечего, и это редкий случай для IT-обучения.

Как выбрать курс вёрстки: 6 критериев

Начните с учебного плана: есть ли в программе Grid и современный CSS. Если учебный план обрывается на float и таблицах, курс писали лет десять назад, и переучиваться придётся сразу после выпуска.

Второй критерий, количество проектов. Один лендинг в финале портфолио не делает. Нормальный ориентир: три-четыре работы разной сложности, из них хотя бы одна многостраничная и одна адаптивная под три брейкпоинта.

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

Четвёртый пункт про актуальность инструментов. В программе 2026 года должны быть Figma, Git, VS Code с Emmet и DevTools браузера. Photoshop как основной источник макетов — тревожный знак.

Пятое: что будет после курса. Уточните, есть ли модуль по JavaScript или курс заканчивается на статичных страницах. От этого зависит, сможете ли вы претендовать на вакансию frontend-джуниора или останетесь с навыком для фриланс-лендингов.

Шестое, отзывы, но не с сайта школы. Ищите выпускников, которые показывают код и рассказывают про проверку домашек. Мы собрали общий чеклист в материале «Как проверить онлайн-курс перед покупкой».

Кому подойдут курсы вёрстки

Курсы вёрстки для начинающих без опыта в IT дают самый мягкий вход в разработку. Результат виден с первого занятия: написали пять строк, обновили вкладку, увидели свою страницу. Порог входа низкий, математика не нужна, а через месяц уже понятно, нравится вам возиться с кодом или нет. Дешёвый способ проверить гипотезу «пойду в разработку» до того, как вы заплатите за годовой трек.

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

Тем, кто уже во frontend, но пришёл со стороны JavaScript, курс закрывает типичную дыру. Такие разработчики бодро пишут логику и теряются на вёрстке модалки, которая должна корректно работать на мобильном. Здесь подойдут короткие программы по современному CSS без базовой части.

Маркетологам и владельцам небольших проектов хватает базового уровня. Поправить текст на лендинге, подвинуть блок, разобраться, почему форма не отправляется. Это экономит бюджет на мелких задачах подрядчику и снимает зависимость от чужого расписания.

Кому курс не нужен: если вы верстаете книги, журналы или презентации, вам в сторону полиграфии и InDesign, а не HTML. Программы принципиально разные, и общего у них только слово в названии.

Кем работать после курсов и сколько платят

Честно про рынок: вакансия «чистый верстальщик» встречается редко. По данным hh.ru на весну 2026 года, в России открыто около 36 позиций с прямым названием HTML-верстальщик, а вилка по ним держится в диапазоне 50 000–95 000 ₽ в зависимости от грейда. Это узкая ниша, и строить на ней карьеру рискованно.

Настоящий спрос лежит рядом. Позиций frontend-разработчика на hh.ru примерно 303, зарплаты идут от 100 000 ₽ у джунов до 200 000 ₽ у сеньоров. По веб-разработчикам вакансий ещё больше, около 482, вилка 70 000–175 000 ₽. Вёрстка в обоих случаях — входной билет, без неё резюме дальше скрининга не уходит.

Третий сценарий, фриланс. Вёрстка лендингов по макету стоит от 15 000 ₽ за проект, сложные многостраничники с анимациями идут дороже. Стабильного дохода это не даёт, зато первые деньги можно увидеть уже через два-три месяца учёбы и заодно набрать реальные кейсы.

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

Что спрашивают на входе в профессию, полезно знать заранее. Типовой набор вопросов джуну: чем блочные элементы отличаются от строчных, как считается специфичность селектора, что произойдёт с соседними отступами при схлопывании, зачем нужен box-sizing, чем position: sticky отличается от fixed, как работает мобильный viewport. Дальше дают тестовое: сверстать секцию по макету за несколько часов. Курс, после которого вы не можете сделать это без подсказок, свою задачу не выполнил, каким бы объёмным ни был сертификат.

Грейды в вёрстке считают не по годам, а по типу задач. Джуниор собирает готовый макет по чужой сетке. Миддл сам решает, где Grid, а где Flexbox, разбирается с legacy-стилями и не ломает соседние компоненты. Сеньор в чистой вёрстке встречается редко, обычно к этому моменту специалист уже ушёл во frontend или в дизайн-системы.

Бесплатно или платно: что реально даёт тренажёр

Бесплатных материалов по вёрстке столько, что теоретически можно дойти до джуна, не заплатив ни рубля. MDN Web Docs закрывает всю теорию и остаётся главным справочником у практикующих разработчиков, а Can I use отвечает на вопрос, какие свойства уже безопасно применять.

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

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

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

Как мы отбираем и ранжируем курсы в каталоге

В подборку попадают программы, где вёрстке отведён самостоятельный модуль с практикой на макетах. Курсы, где HTML и CSS упоминаются одной вводной лекцией внутри трека по маркетингу или дизайну, мы отсеиваем: по такому запросу человек ищет обучение навыку, а не обзорную экскурсию.

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

Цены и количество программ подтягиваются из фидов школ, поэтому цифры в карточках совпадают с тем, что вы увидите на сайте школы в момент перехода. Сейчас в разделе 129 курсов от 35 школ.

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

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

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