Самый частый вопрос у новичков — с чего начать. В интернете сотни уроков, курсов и статей, и легко потратить месяц, перескакивая с одного материала на другой без результата. Эта статья даёт чёткий маршрут: что учить, в каком порядке, сколько времени это займёт и когда стоит перейти с самообучения на структурированный курс.
Сколько времени нужно, чтобы освоить вёрстку
Если вы занимаетесь 1–2 часа в день:
- Минимальный старт (HTML + базовый CSS): 4–6 недель
- До уровня junior-верстальщика: 3–5 месяцев
- Первые платные заказы на фрилансе: 4–7 месяцев
Если выделять 3–4 часа в день — сроки сокращаются вдвое. Ключевое условие — регулярность и практика, а не количество просмотренных видео.
Пошаговый план обучения верстке
Шаг 1. HTML — структура страницы (2–3 недели)
HTML — язык разметки, он описывает структуру: заголовки, абзацы, списки, ссылки, изображения, таблицы, формы. Начинайте отсюда, без CSS.
Что изучить: семантические теги (header, main, section, article, nav, footer), формы и input-элементы, атрибуты, базовые метатеги. Практика: сверстайте статическую страницу без стилей — просто разметка.
Шаг 2. CSS — оформление (3–4 недели)
CSS отвечает за внешний вид: цвета, шрифты, отступы, размеры. Главное на этом этапе — не пытаться запомнить все свойства сразу, а понять логику каскада и специфичности.
Что изучить: блочная модель (box model), позиционирование (position, float), единицы измерения (px, %, rem, vh). Практика: стилизуйте страницу из шага 1.
Шаг 3. Flexbox и CSS Grid (2–3 недели)
Это два современных инструмента для создания раскладок. Flexbox — для выравнивания элементов в строку или колонку. Grid — для двумерных сеток. Без них современная вёрстка невозможна.
Практика: сверстайте карточки товаров, хедер с навигацией, двухколоночный макет.
Шаг 4. Адаптивная вёрстка (2–3 недели)
Адаптивность — умение сделать сайт удобным на любом экране: от смартфона до широкого монитора. Используются media queries и mobile-first подход.
Практика: возьмите уже свёрстанный макет и адаптируйте его для мобильных (320px–480px), планшетов (768px) и десктопа (1280px+).
Шаг 5. Figma — чтение макетов (1 неделя)
Почти все заказы приходят в виде файла Figma. Нужно уметь: смотреть отступы и размеры, экспортировать иконки и изображения, понимать компонентную структуру.
Шаг 6. Git и GitHub (1 неделя)
Базовые команды (init, add, commit, push, pull) — обязательный минимум. Без GitHub нельзя показать работодателю своё портфолио.
Шаг 7. Сборка портфолио (2–4 недели)
Минимальное портфолио для поиска работы: 3–5 проектов. Хорошие варианты для учебных работ: лендинг по Figma-макету, интернет-магазин (главная + карточка товара), корпоративный сайт.
Ключевые инструменты верстальщика
Редакторы кода
- VS Code — стандарт отрасли, бесплатный, огромная экосистема плагинов
- Основные расширения: Live Server, Prettier, ESLint, Auto Rename Tag
Браузеры и DevTools
- Chrome DevTools — инспектор элементов, консоль, сетевой раздел
- Firefox Developer Edition — удобный Grid-инспектор
Дизайн
- Figma — основной инструмент для работы с макетами
- Zeplin — альтернатива, используется в некоторых командах
Дополнительные инструменты
- SCSS/SASS — препроцессор CSS (изучайте после освоения базы)
- Gulp или Vite — автоматизация сборки
- BEM — методология именования классов
Самообучение или курс: что выбрать
Самообучение подходит, если:
- Есть высокая самодисциплина и умение работать без дедлайнов
- Есть время на поиск и фильтрацию материалов
- Готовы потратить на обучение 6–12 месяцев вместо 3–5
Курс подходит, если:
- Нужна чёткая структура и последовательность тем
- Важна обратная связь на домашние задания
- Хотите получить результат (портфолио + первая работа) быстрее
- Нужна поддержка куратора при трудностях
Реальность такова: большинство людей без технического бэкграунда обучаются значительно быстрее на курсах, чем самостоятельно, — за счёт готовой программы и кураторской поддержки.
Как начать обучение верстке прямо сейчас
Если вы выбираете курс — вот несколько проверенных вариантов с разным форматом и ценой:
- HTML Academy — интерактивные задачи прямо в браузере, идеально для старта
- Skillbox «Веб-вёрстка» — видеолекции + живые проекты + куратор
- Нетология «HTML/CSS с нуля» — короткий курс на 2 месяца для быстрого старта
- Яндекс Практикум «Веб-разработчик» — глубокая программа с HTML/CSS в основе
Развёрнутое сравнение, цены и форматы — в нашем разделе «Лучшие курсы по верстке сайтов».
Частые ошибки при обучении верстке
- Только смотреть видео, не практиковаться. Верстка — практический навык. Без кода руками он не формируется.
- Учить всё сразу. JavaScript, фреймворки, анимации — всё это придёт позже. Сначала HTML + CSS до уверенного уровня.
- Не собирать портфолио. Без реальных проектов найти первую работу почти невозможно.
- Бояться заглядывать в документацию. Опытные верстальщики постоянно гуглят — это нормально.
Итоги
Обучение верстке — это последовательный процесс: HTML → CSS → Flexbox/Grid → адаптивность → Figma → Git → портфолио. Пропускать этапы не стоит — каждый следующий опирается на предыдущий. При регулярных занятиях (1–2 часа в день) до уровня junior-верстальщика можно дойти за 3–5 месяцев.
Если вы уже решили учиться — следующий шаг: выбрать формат.