# Вёрстка сайта: что это простыми словами

30 октября 2026 г. · 2 мин чтения · Студия AETHER · https://aether-studio.ru/blog/chto-takoe-verstka

Вёрстка — это превращение макета в настоящую страницу: дизайнер нарисовал, как сайт должен выглядеть, а разработчик описал это кодом, который понимает браузер. От вёрстки зависит, совпадёт ли сайт с макетом, будет ли он быстрым и удобным на телефоне. Разбираем, как устроен этот этап и что проверить заказчику.

## Что это такое

Страница сайта состоит из трёх слоёв:

- **HTML** — структура: заголовки, абзацы, картинки, кнопки, формы;
- **CSS** — внешний вид: цвета, шрифты, отступы, расположение блоков;
- **JavaScript** — поведение: анимации, всплывающие окна, отправка форм.

Вёрстка — это прежде всего HTML и CSS, собранные по макету. Её место в работе над сайтом такое: прототип, макет, вёрстка, подключение функций, запуск. О макете — статья [«Макет сайта»](https://aether-studio.ru/blog/maket-sajta), о всех этапах — [«Этапы разработки сайта»](https://aether-studio.ru/blog/etapy-razrabotki-sajta).

## Адаптивная вёрстка

Адаптивная вёрстка — это когда одна и та же страница перестраивается под ширину экрана: колонки встают одна под другую, меню сворачивается в кнопку, шрифты и отступы становятся удобными для пальца. Ширины, на которых раскладка меняется, называют контрольными точками. Чем это отличается от отдельной мобильной версии и что проверить на телефоне, разобрано в статье [«Мобильная версия сайта»](https://aether-studio.ru/blog/mobilnaya-versiya-sajta).

## На конструкторе и на коде

На конструкторе вёрстку делает сама платформа: вы собираете страницу из готовых блоков. На коде разработчик пишет вёрстку под ваш макет — свободы больше, а лишнего кода меньше, поэтому страница обычно грузится быстрее. Подробное сравнение — в статье [«Тильда или сайт на коде»](https://aether-studio.ru/blog/tilda-ili-kod).

## Что проверить заказчику

- **Совпадает с макетом** на компьютере и на телефоне — не до пикселя, но без заметных расхождений.
- **Работает в основных браузерах**: Chrome, Safari, Яндекс Браузере, Firefox.
- **Тексты не вылезают** за края, ничего не налезает друг на друга при длинных словах и больших цифрах.
- **Кнопки и ссылки удобно нажимать пальцем.**
- **Страница быстро грузится** — как проверить, разобрано в статье [«Скорость загрузки сайта»](https://aether-studio.ru/blog/skorost-zagruzki-sajta).
- **Формы отправляются** — проверьте тестовой заявкой.

## Сколько стоит

Цена вёрстки зависит от числа уникальных блоков и страниц, анимаций и того, нужна ли отдельная проработка под телефон. У нас вёрстка — часть разработки: лендинг на коде мы делаем целиком, от структуры до запуска, поэтому отдельной цены у неё нет.

## Как это делаем мы

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

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим ваш сайт.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.