Обучение на HTML-верстальщика: вёрстка сайтов с нуля, от 3 999 ₽

Курс вёрстки может стоить как пара обедов, а может как подержанный ноутбук, и длиться от двух месяцев до года. Цена при этом слабо связана с тем, насколько хорошо вы научитесь верстать: часть дорогих программ продаёт HTML и CSS как первый модуль большой профессии. Ниже разбираем, как мы оценивали курсы, какой подойдёт под вашу ситуацию и когда вложения вернутся. Саму технологию коротко объяснили в статье «Что такое вёрстка и какие виды бывают».

Как мы оценивали курсы HTML-верстальщиков: методология Checkroi

Мы смотрим на курс глазами человека, который через полгода пойдёт на собеседование. Поэтому критерии такие:

• Доля практики. Сколько макетов вы сверстаете сами, а не посмотрите в записи.
• Стек. Семантический HTML5, Flexbox и Grid, адаптив через media queries, CSS-переменные, перенос макета из Figma.
• Проверка кода. Ревью наставника или автотесты, и как быстро приходит ответ.
• Git и сборка. Без репозитория и сборщика код новичка в команду не возьмут.
• Портфолио. Сколько законченных страниц останется у вас на руках.
• Отзывы. Учитываем те, где выпускник пишет конкретику: какой проект делал, сколько ждал проверку.
• Помощь с работой. Резюме, подготовка к собеседованию, стажировка.
• Деньги. Цена, рассрочка и что в неё входит.

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

Какой курс HTML-верстальщика выбрать под свою ситуацию

Если вы новичок без опыта

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

Что учить после вёрстки, мы расписали в roadmap фронтенд-разработчика от HTML до первого оффера.

Если вы уже верстали и хотите подтянуть уровень

Курс «HTML и CSS. Адаптивная вёрстка и автоматизация» от HTML Academy рассчитан на тех, кто знает базу: там адаптив, препроцессоры и автоматизация сборки проекта.

Если нужна быстрая переквалификация за три месяца

Три месяца длятся «Вёрстка на HTML и CSS» от Бруноям, «Основы вёрстки HTML и CSS» от Академии Синергия, «HTML и CSS с нуля» от Skillbox и курс Яндекс Практикума. Этого хватает, чтобы сверстать адаптивный одностраничный сайт по макету и выложить его на GitHub.

Если бюджет до 50 000 ₽

В эту сумму укладываются PurpleSchool, «Профессиональная верстка» от GeekBrains, оба курса HTML Academy, Бруноям и Синергия. Точную цену на сегодня смотрите в карточке курса выше.

Если важен диплом или вы сразу целитесь дальше вёрстки

Диплом дают программы Skypro «HTML и CSS с нуля» и «React-разработчик с нуля», во второй вёрстка идёт первым этапом перед React. У Skillbox есть «Веб-вёрстка» на девять месяцев со стажировкой и «Фулстек-разработчик на JavaScript», если хотите дойти до серверной части.

Сколько стоят курсы HTML-верстальщиков и есть ли рассрочка

Цены в подборке от 3 999 ₽ до 195 160 ₽, медиана 32 676 ₽. Разброс объясняется составом программы. Курс только по HTML и CSS стоит в разы дешевле профессии, где за вёрсткой идут JavaScript, React и работа с сервером. Если вам нужна именно вёрстка, переплачивать за длинную программу нет смысла.

Рассрочку обычно предлагают крупные школы: Skillbox, Skypro, GeekBrains, Яндекс Практикум. Срок и переплата меняются от акции к акции, их проверяйте на странице курса перед оплатой. Если у школы есть образовательная лицензия, часть расходов можно вернуть социальным налоговым вычетом по статье 219 Налогового кодекса. Лицензию стоит проверить в реестре Рособрнадзора до оплаты, а не после.

Сколько учиться на курсах HTML-верстальщиков

Короткие программы по HTML и CSS занимают от двух до четырёх месяцев. Длинные, где вёрстка лишь первый модуль, растягиваются на девять-одиннадцать месяцев. Нагрузка обычно 6–10 часов в неделю, это вечера и часть выходных, так что совмещать с работой реально.

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

Что входит в программу курсов HTML-верстальщиков

Программы разных школ похожи по составу. Если свести их вместе, получится такой список:

• семантическая разметка HTML5: заголовки, списки, формы, таблицы, доступность;
• CSS: селекторы, каскад, блочная модель, позиционирование;
• Flexbox и Grid для сеток;
• адаптив и подход mobile first, media queries;
• перенос макета из Figma: размеры, отступы, шрифты, экспорт графики;
• методология БЭМ для именования классов;
• препроцессор Sass и сборщик проекта;
• Git и GitHub, публикация сайта на GitHub Pages;
• базовый JavaScript для меню, слайдеров и форм.

Если хотите понять, с чем предстоит работать, до покупки курса, прочитайте наше объяснение, что такое язык разметки HTML и где он используется. Для справки во время учёбы пригодится учебник MDN по HTML: к нему отсылают почти все школы.

Отдельно смотрите на объём CSS. Именно там новички застревают дольше всего, и хороший курс тратит на стили больше времени, чем на теги. Коротко о том, что такое CSS и как его использует верстальщик, мы тоже писали.

Чему вы научитесь и какое портфолио соберёте

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

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

Помогают ли школы с трудоустройством на позицию HTML-верстальщика

Гарантию трудоустройства в этой подборке дают две программы Skypro. У гарантии всегда есть условия: сданные вовремя проекты, активность в карьерном центре, готовность рассматривать предложения. Прочитайте их в договоре до оплаты. Skillbox, Бруноям и Синергия помогают с резюме и портфолио, в «Веб-вёрстке» от Skillbox есть стажировка. У GeekBrains работает центр карьеры с базой вакансий, у PurpleSchool стажировка есть на тарифе со стажировкой.

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

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

Большинство курсов вёрстки выдают сертификат школы. Диплом дают программы Skypro.

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

Окупаемость обучения HTML-верстальщиков

По нашему обзору профессии, джуниор-верстальщик начинает с 50–70 тысяч рублей в месяц, специалист с опытом от трёх лет в Москве получает до 150–180 тысяч. Медиана цены курса в подборке 32 676 ₽, это порядка одной зарплаты джуниора. Курс по нижней границе цены, за 3 999 ₽, окупается первым же небольшим заказом на одностраничный сайт.

С программами у верхней границы, около 195 160 ₽, расчёт другой: они готовят к фронтенд-разработке, где стартовая зарплата выше. Сколько получает новичок во фронтенде по грейдам и городам, мы разобрали в статье о зарплате фронтенд-разработчика. Дорогой курс окупается за несколько месяцев работы, но только если вы действительно дойдёте до JavaScript, а не остановитесь на вёрстке.

Выбирая между коротким курсом и длинной программой, учтите и прогноз: какую часть вёрстки нейросети заберут к концу десятилетия, мы посчитали в тесте «Заменит ли AI HTML-верстальщика?».

Смежные профессии: куда смотреть ещё

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

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

Если нужна только одна часть навыка, загляните в подборку курсов вёрстки или в курсы адаптивной вёрстки.