Складчина Каталог
Мои курсы
Профессия · Верстальщик

Как сайт выглядит одинаково в разных браузерах

Верстальщик — специалист, который переводит дизайн-макеты в работающий HTML/CSS-код. Задача: чтобы сайт выглядел так, как нарисовал дизайнер, на всех устройствах и в разных браузерах. В 2024 году чистых верстальщиков всё меньше — рынок смещается в сторону фронтенд-разработчиков, владеющих JavaScript и фреймворками. Но спрос на верстальщиков сохраняется в агентствах, у небольших студий и в командах, где вёрстка выделена как отдельная роль.

162 курса
61 автор
от 80 ₽ цена курса
★ 4.8 232 отзыва
Смотреть курсы
Как сделать лендинг студийного уровня в Adobe MuseКонвертация PSD в HTMLОсновной курс по CMS Joomla 3.9Adobe InDesign. Базовый уровень

Курсы 162

Все162 Платные162Графический дизайн51Инструменты дизайнера41Веб-дизайн и UI/UX40No-code и конструкторы сайтов28Графика и элементы дизайна19
Сортировка: НовыеПо рейтингуДешевлеДороже

Направления и категории

Графический дизайн51Инструменты дизайнера41Веб-дизайн и UI/UX40No-code и конструкторы сайтов28Графика и элементы дизайна19Конструкторы и билдеры15Веб-разработка: Frontend14WordPress плагины14
Все направления и категории
Другое10Онлайн-бизнес7PSD шаблоны и фотокниги7Motion-дизайн и анимация4Контент-маркетинг4Копирайтинг4Программирование с AI3Заработок на AI3Веб-разработка: Backend3Презентации и визуальный контент3WordPress темы и шаблоны3AI-автоматизация и агенты2DevOps и инфраструктура2Digital-маркетинг2Фриланс и удалёнка2Генерация видео1Fullstack-разработка13D-моделирование и визуализация1Иллюстрация1SMM и соцсети1SEO1Продажи1Переговоры и коммуникации1Обработка фото1Писательское мастерство1Карьерный рост1Инфобизнес и онлайн-школы1Заработок на фрилансе1Прочие схемы заработка1Joomla шаблоны и расширения1PHP скрипты и SaaS1

Категории

Дизайн79Программы и софт49Программирование и IT41Бизнес и предпринимательство9Маркетинг6Копирайтинг и писательство4Нейросети и AI3Карьера и профессии3Заработок и схемы3Фото и видео1

О профессии

Средняя зарплата HTML-верстальщика по данным hh.ru и Хабр Карьеры составляет 60 000–80 000 рублей. Разброс большой: джун получает 40 000–60 000 рублей, мидл с навыками препроцессоров и адаптива — 80 000–120 000 рублей. Те, кто освоил React, Vue или Angular, выходят на уровень фронтенд-разработчика с зарплатами от 150 000 рублей.

Сколько зарабатывают

Джун (до 1 года)40 000 ₽ — 65 000 ₽
Мидл (1–3 года)65 000 ₽ — 120 000 ₽
Сеньор (3–5 лет)100 000 ₽ — 180 000 ₽
Фронтенд-эксперт (5+ лет)170 000 ₽ — 300 000 ₽

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

Джун-верстальщик

6–12 месяцев · 40 000–65 000 ₽

Вёрстка простых страниц по макетам в Figma, изучение адаптивной вёрстки и кроссбраузерности. Часто работа на фрилансе.

Верстальщик / HTML-разработчик

1–3 года · 65 000–120 000 ₽

Работа с препроцессорами (SASS, LESS), BEM-методологией, инструментами сборки (Webpack, Gulp). Участие в командных проектах.

Фронтенд-разработчик

3–5 лет · 120 000–200 000 ₽

Добавление JavaScript, React или Vue.js к навыкам вёрстки. Работа с API, оптимизация производительности.

Старший фронтенд

5+ лет · 200 000–350 000 ₽

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

Навыки и инструменты

Профессиональные навыки

  • HTML5 и CSS3Семантическая вёрстка, Flexbox, Grid — фундамент профессии
  • Адаптивная вёрсткаMedia queries, mobile-first подход, работа с разными разрешениями экрана
  • Препроцессоры CSSSASS или LESS — ускоряют написание стилей и упрощают поддержку кода
  • Работа с FigmaЧтение макетов дизайнера, понимание сеток, отступов и компонентов
  • GitКонтроль версий — обязателен для командной работы

Навыки общения и работы

  • Внимание к деталям
  • Пикселперфект
  • Умение читать и понимать дизайн
  • Коммуникация с дизайнерами и разработчиками
  • Самостоятельность

Обязанности

Вёрстка страниц и компонентов по макетам из Figma / Photoshop

Адаптация под мобильные устройства и разные браузеры

Подключение анимаций и интерактивных элементов

Оптимизация производительности страниц

Исправление верстальных багов

Взаимодействие с дизайнерами по спорным моментам в макете

Что важно знать

Преимущества

  • Быстрый вход в профессиюЗа 3–6 месяцев самообучения можно найти первую оплачиваемую работу или фриланс-заказ
  • Удалённая работаВерстальщики работают удалённо — можно жить в любом городе и получать московскую зарплату
  • Переход во фронтендВёрстка — логичный первый шаг к полноценной фронтенд-разработке с вдвое большими зарплатами

Сложности

  • Профессия сужаетсяСпрос на «чистую» вёрстку падает — работодатели хотят верстальщиков, умеющих хотя бы базовый JS
  • Рутинность задачМного однотипных задач: вёрстка похожих страниц, исправление мелких багов. Творчества мало.
  • Низкий старт зарплатыПервый год-два зарплата джуна 40 000–50 000 рублей при высоких ожиданиях после курсов

Востребованность

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

Веб-студии и агентства

Интернет-магазины

Крупные компании (корпоративные сайты)

Фриланс-проекты

СМИ и новостные порталы

Как освоить профессию

Изучить HTML и CSS

Htmlacademy, freeCodeCamp или онлайн-курсы. На базу уходит 2–4 месяца при регулярных занятиях

Освоить адаптивную вёрстку

Media queries, Flexbox, Grid — без этого невозможно найти работу. Практика на реальных макетах из Figma

Собрать портфолио

3–5 свёрстанных сайтов на GitHub Pages или свой домен. Верстать чужие макеты с Figma Community

Начать с фриланса или стажировки

Первые заказы на Kwork, FL.ru или стажировка в студии — чтобы получить опыт командной работы

Добавить JavaScript

Базовый JS открывает путь во фронтенд с зарплатами 120 000+ рублей. Учить сразу после твёрдого освоения HTML/CSS

Авторы 17

АЖ Андрей Журавлев 5 курсов · ★ 5.0АЛ Андрей Лов 3 курса · ★ 5.0АК Андрей Козьяков 3 курса · ★ 4.5НС Николай Спиряев 3 курса · ★ 4.1АК Александр Куртеев 2 курса · ★ 5.0МС Максим Соколов 2 курса · ★ 5.0АА Арслан Ахмедов 2 курса · ★ 5.0НН Нина Наумова 2 курса · ★ 5.0БП Борис Поташник 2 курса · ★ 5.0ДФ Данил Фимушкин 2 курса · ★ 4.2РГ Роман Горелик 2 курса · ★ 1.0ДХ Дамир Халилов 2 курса

Отзывы 232

joomla199224 мая 2017 г. ★★★★☆

Плюсы: оперативность выдачи материала, подходит для новичков

Минусы: материал курса доступен бесплатно в другом месте

Оперативностью выдачи материала доволен. Курс в целом очень хорош для меня, как для новичка. Но, к сожалению, ожидал получить немного другой материал. Данный материал имеется в свободном доступе под названием «Веб-дизайн Интенсив 2015».

↗ Веб-дизайн. Старт
greg5512 мая 2017 г. ★★★★★

Плюсы: чёткость изложения, отсутствие воды, охват базовых функций, создание интерактивного PDF и анимации

Минусы: отсутствие тонкостей печати

Это лучший курс по InDesign из трёх, которые я видел, для бытового использования. Всё чётко, без воды и затягивания времени, объяснены все базовые функции, вплоть до создания интерактивного PDF и анимации. Может, нет каких-то тонкостей печати, но это зависит, скорее всего, от требований типографии, а для домашнего использования очень даже подойдёт.

↗ Adobe InDesign CC
Moskva Voronej10 декабря 2016 г. ★★☆☆☆

Минусы: неактуальный материал, наплевательское отношение автора к модульной сетке

Фреймворк «Брутстрап»! Уроки для дедушек и бабушек, к веб-дизайну и разработке курс практически не имеет никакого отношения. В основном такое мнение сложилось из-за наплевательского отношения автора к модульной сетке.

↗ Adobe Muse для чайников 2.0
ks_tsk17 октября 2016 г. ★★★★★

Плюсы: огромное количество настроек, редактирование панели в реальном времени, возможность создания аскетичной панели

Минусы: отсутствие приватной ветки в теме с плагинами

Офигенная штука, просто офигенная! Огромное количество настроек, редактирование панели в реальном времени на сайте, возможность сделать максимально аскетичную и ненапряжную панель — именно то, что мне было необходимо. Я очень доволен! Только замечание к организатору: мне бы хотелось в теме с плагинами для WordPress видеть приватную ветку, потому что содружество складчиков является очень ценным ресурсом, и почему его многие организаторы не задействуют — для меня загадка. Ведь кто-то может кому-то помочь.

↗ Slick Menu - Responsive WordPress Vertical Menu
maryclean11 октября 2016 г. ★★★★★

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

↗ Slick Menu - Responsive WordPress Vertical Menu
exploration11 августа 2016 г. ★★★★★

Плюсы: быстрая реакция организатора, качественный продукт, подходит для быстрого прототипирования, солидные презентации

Спасибо организатору за быструю реакцию и качественный продукт! Сам продукт отличный — для быстрого прототипирования самое оно, клиенты в восторге от солидности презентаций такого плана.

↗ Select - Landing Page Set with Page Builder
SirFisher19 июля 2016 г. ★★★★★

Плюсы: много функционала, удобное управление, быстрая раздача

Шикарнейший билдер. Можно выделить следующее: много вкусного, легко управляется. Оргу отдельное спасибо за раздачу.

↗ FLATPACK - Landing Pages Pack With Page Builder

Частые вопросы

Чем верстальщик отличается от фронтенд-разработчика?

Верстальщик работает с HTML и CSS. Фронтенд-разработчик дополнительно знает JavaScript и фреймворки (React, Vue). Граница размытая, рынок толкает верстальщиков к изучению JS.

Сколько времени нужно, чтобы научиться вёрстке?

До первой оплачиваемой работы — 3–6 месяцев. До уровня уверенного мидла — 1,5–2 года реальных проектов.

Есть ли работа для верстальщиков на удалёнке?

Да, большинство вакансий — удалённые. Студии и продуктовые компании активно нанимают дистанционно.