Верстальщик — специалист, который переводит дизайн-макеты в работающий HTML/CSS-код. Задача: чтобы сайт выглядел так, как нарисовал дизайнер, на всех устройствах и в разных браузерах. В 2024 году чистых верстальщиков всё меньше — рынок смещается в сторону фронтенд-разработчиков, владеющих JavaScript и фреймворками. Но спрос на верстальщиков сохраняется в агентствах, у небольших студий и в командах, где вёрстка выделена как отдельная роль.
Средняя зарплата HTML-верстальщика по данным hh.ru и Хабр Карьеры составляет 60 000–80 000 рублей. Разброс большой: джун получает 40 000–60 000 рублей, мидл с навыками препроцессоров и адаптива — 80 000–120 000 рублей. Те, кто освоил React, Vue или Angular, выходят на уровень фронтенд-разработчика с зарплатами от 150 000 рублей.
Вёрстка простых страниц по макетам в Figma, изучение адаптивной вёрстки и кроссбраузерности. Часто работа на фрилансе.
Работа с препроцессорами (SASS, LESS), BEM-методологией, инструментами сборки (Webpack, Gulp). Участие в командных проектах.
Добавление JavaScript, React или Vue.js к навыкам вёрстки. Работа с API, оптимизация производительности.
Архитектурные решения, ревью кода, менторство. Работа в продуктовых компаниях или на зарубежных проектах.
Вёрстка страниц и компонентов по макетам из Figma / Photoshop
Адаптация под мобильные устройства и разные браузеры
Подключение анимаций и интерактивных элементов
Оптимизация производительности страниц
Исправление верстальных багов
Взаимодействие с дизайнерами по спорным моментам в макете
Спрос умеренный и стабильный. Чистых верстальщиков на рынке меньше, чем фронтенд-разработчиков, но и вакансий — тоже. Особенно много работы в веб-студиях и агентствах.
Htmlacademy, freeCodeCamp или онлайн-курсы. На базу уходит 2–4 месяца при регулярных занятиях
Media queries, Flexbox, Grid — без этого невозможно найти работу. Практика на реальных макетах из Figma
3–5 свёрстанных сайтов на GitHub Pages или свой домен. Верстать чужие макеты с Figma Community
Первые заказы на Kwork, FL.ru или стажировка в студии — чтобы получить опыт командной работы
Базовый JS открывает путь во фронтенд с зарплатами 120 000+ рублей. Учить сразу после твёрдого освоения HTML/CSS
Плюсы: практическая направленность, советы из личного опыта, полезность для подготовки к печати, приятная подача материала, отсутствие воды
Прекрасный курс. Особенность в том, что все рассматривается через призму практики: очень много мелких моментов и советов, которые автор приводит из личного опыта. Если вы изучили (или изучаете) Illustrator и собираетесь делать полиграфию на заказ — визитки, открытки, календари и прочее, верстать тексты, готовить к печати — курс очень полезный. Я уже не раз к нему возвращалась, чтобы уточнить практические детали. Кроме того, автора просто приятно слушать: нет ощущения, что читают по бумажке, нет воды и занудства. Однозначно рекомендую.
↗ Векторная графика и полиграфия в Adobe IllustratorПлюсы: подробное объяснение анимации, понятное позиционирование
Курс неплохой. Часто попадаются ужасные, а этот нормальный. Про анимацию показано более-менее подробно, позиционирование во время пошаговой анимации — нормик.
↗ Создание эксклюзивных сайтов с анимацией на Tilda Zero BlockПлюсы: актуальность программы, соответствие заявленной теме
Действительно «Практическая Полиграфия 2.0». В других местах обычно «1.0» под этим названием или «Журналы и каталоги» — всё перепутали. Спасибо!
↗ Практическая полиграфия 2.0Плюсы: сайт собран и готов к работе
Минусы: устаревшие решения, плохая оптимизация блоков, дублирование CSS-стилей, малое количество блоков
Неплохо, но решения устаревшие. Блоки отвратительно оптимизированы: CSS-стили повторяются из блока в блок, приходится переделывать, чтобы избежать дублирования. На практике оказалось, что блоков очень мало. Но все это придирки. Сайт собран и готов к работе.
↗ AyroUI - набор блоков для BootstrapПлюсы: возможность собрать уникальный и быстрый сайт, удобная блочная система
Отличная складчина! Собираешь из кусочков и блоков страницы, натягиваешь на свой движок или на WP (или без) и получаешь уникальный быстрый сайт без особых знаний верстки (хотя умения все же нужны). Рекомендую для любителей!
↗ AyroUI - набор блоков для BootstrapПлюсы: качественный материал, отличные шрифты, удобный формат для поиска
Организатору респект за материал. Отличные шрифты. Удобный формат для поиска. Рекомендую к участию.
↗ 600 кириллических шрифтов для коммерческого использованияМинусы: неполное содержание модулей, отсутствие обещанных текстовых материалов, малый объем материала, отсутствие заявленной информации по теме сеток
Со стороны организатора было бы честным указать, что в видеоуроках есть только часть тем из каждого модуля, а не все, которые перечислены в содержании курса. Также было бы честным указать, что в тарифе «Стандарт» нет никаких текстовых материалов, только задания для участников. Объем материала по сравнению с другими курсами по дизайну за эту цену — мизерный. Например, модуль по сеткам, который был для меня самым важным, содержит только одно видео на 30 минут. Я купился на заявление о «разоблачении мифов про сетки», но ничего этого нет. Если вы не в первый раз слышите про сетки, то ничего нового не узнаете.
↗ Композиция и сеткиПлюсы: интересный материал, качественная организация
Очень долго ждал этой складчины. Невероятно интересный материал, с первых минут просмотра захватывает. Организатору большое спасибо за проделанную работу.
↗ Все лекции бюроВерстальщик работает с HTML и CSS. Фронтенд-разработчик дополнительно знает JavaScript и фреймворки (React, Vue). Граница размытая, рынок толкает верстальщиков к изучению JS.
До первой оплачиваемой работы — 3–6 месяцев. До уровня уверенного мидла — 1,5–2 года реальных проектов.
Да, большинство вакансий — удалённые. Студии и продуктовые компании активно нанимают дистанционно.