Что такое вёрстка
Вёрстка - процесс превращения дизайн-макета в работающую веб-страницу с помощью HTML, CSS и JavaScript. Верстальщик берёт картинку из Figma и пишет код, по которому браузер отображает страницу. Результат - сайт, который можно открыть в любом браузере.
Вёрстка простыми словами
Дизайнер рисует, как сайт должен выглядеть. Верстальщик "оживляет" эту картинку: пишет код, по которому браузер строит страницу. Тексты становятся текстами, кнопки - кнопками, картинки - картинками. Без вёрстки дизайн-макет - просто красивая картинка.
Технологии вёрстки
- HTML. Структура страницы: заголовки, абзацы, ссылки, кнопки. Базовый язык разметки.
- CSS. Внешний вид: цвета, шрифты, отступы, расположение блоков. Стилизация.
- JavaScript. Интерактивность: анимации, проверка форм, обработка нажатий.
Виды вёрстки
- Адаптивная. Страница подстраивается под разные размеры экранов (десктоп, планшет, мобильный).
- Резиновая. Блоки растягиваются и сжимаются плавно.
- Фиксированная. Жёсткие размеры, не меняются. Устарела, не используется в 2026.
- Семантическая. Используются правильные HTML-теги (header, nav, article, footer) для лучшего SEO и доступности.
Что важно в качественной вёрстке
- Скорость загрузки. Оптимизированный код без лишних элементов.
- Кроссбраузерность. Одинаково работает в Chrome, Safari, Firefox, Яндекс.Браузере.
- Адаптивность. Корректно на устройствах от смартфона до 4K-монитора.
- SEO-оптимизированность. Правильные семантические теги, мета-данные, alt-тексты.
- Доступность. Сайт работает для людей с нарушением зрения и моторики.
- Соответствие макету. Точное соответствие дизайну до пикселя.
Сколько занимает вёрстка
- Лендинг - 2-4 дня
- Корпоративный сайт до 10 страниц - 5-10 дней
- Интернет-магазин - 10-20 дней
- Сложный портал - от 30 дней