Хорошая верстка — это когда ничего не заметно
Когда верстка сделана правильно, пользователь просто пользуется сайтом — и не думает о том, как это устроено внутри. Когда плохо — он уходит, а вы теряете клиента. Вот в чём разница на практике.
Профессиональная верстка:
.webp)
- Выглядит одинаково в Chrome, Firefox, Safari и Edge
- Открывается на смартфоне так же хорошо, как на мониторе
- Загружается за секунды, а не минуты
- Поисковики корректно читают структуру страницы
- Код легко поддерживать и дорабатывать через год
Дешёвая верстка наспех:
.webp)
- Съезжает в Safari или на мобильных устройствах
- Тормозит и теряет посетителей на первой секунде
- Роботы видят кашу вместо структуры — SEO страдает
- Через полгода разобраться в коде невозможно
- Переделка стоит дороже, чем сделать нормально сразу
Верстка — это фундамент, который не виден глазу, но определяет всё остальное. Хороший дизайн, убедительный текст и мощный бэкенд бесполезны, если страница криво открывается на половине устройств.
Что именно верстаю
Берусь за задачи любой сложности: от быстрой верстки figma-макета до интеграции в CMS или нестандартных интерактивных интерфейсов. Если у вас есть макет — у меня есть решение.
Верстка из Figma, PSD, Sketch
.webp)
Самый частый запрос. Берёте дизайн у своего дизайнера — я делаю из него рабочий код. Результат неотличим от макета: каждый отступ, тень и шрифт на своём месте.
Адаптивная верстка
.webp)
Страница корректно выглядит с экрана 320px до 2560px. Тестирую на реальных устройствах, не только в DevTools — разница есть, и она важна.
Кроссбраузерная верстка
Chrome, Firefox, Safari, Edge — один результат. Знаю специфику каждого браузера и сразу пишу код, которому не нужны правки «только для Safari».
Интеграция в CMS
.webp)
Верстаю шаблоны и блоки под WordPress, Tilda, Bitrix. Контент редактируется через административную панель без касания кода.
Email-верстка
.webp)
HTML-письма для рассылок — корректно отображаются в Gmail, Outlook и Apple Mail. Email-верстка живёт по своим правилам, и я их знаю.
Анимации и интерактив
.webp)
Параллакс, hover-эффекты, плавные переходы, слайдеры — делаю это через CSS и чистый JS без тяжёлых библиотек там, где они не нужны.
Стек и инструменты
Использую то, что проверено на реальных проектах и поддерживается годами. Никаких устаревших библиотек ради галочки в резюме.
Разметка и стили
Скрипты и фреймворки
Дизайн и сборка
Как проходит работа
Без лишних этапов и согласований по кругу. Прислали макет — получили рабочий сайт. Вот как это выглядит изнутри.
Получаю макет и ТЗ
Принимаю файлы в любом формате: Figma, PSD, XD, Sketch или даже подробное описание. Задаю уточняющие вопросы сразу, чтобы не тормозить в процессе.
Планирую структуру
Прежде чем писать первую строчку кода — изучаю макет целиком, нахожу повторяющиеся паттерны и планирую архитектуру компонентов. Хорошая структура = половина работы.
Верстаю семантично
HTML5-разметка с правильными тегами — не просто дивы везде. Это помогает SEO, доступности и читаемости кода другими разработчиками.
Добавляю адаптивность
Проверяю каждый экран: 320px, 768px, 1024px, 1440px и выше. Адаптивная верстка макета сайта — это не «ужать всё», а продумать каждый брейкпоинт.
Тестирую в браузерах
Chrome, Firefox, Safari, Edge — смотрю своими глазами, не только через эмулятор. Safari на iPhone и Safari на Mac — разные вещи, и я об этом знаю.
Оптимизирую и сдаю
Минификация, оптимизация изображений, убираю неиспользуемый код. Сдаю через Git или архивом — как удобнее. Объясняю структуру при необходимости.
Кейсы: примеры вёрстки по макету
Два настоящих проекта, без выдуманных цифр. Коротко — здесь, подробно — в статьях блога.
Типография PrintMSK
Одностраничный сайт московской типографии: каталог, форма заявки с загрузкой макета для печати, витрина партнёров — HTML, CSS и JS без фреймворков.
Читать кейс →
Веб-студия LAMPA
Лендинг для веб-студии: CTA-кнопки в несколько точек страницы, процесс в 6 шагов, FAQ-аккордеон без JS-библиотек — HTML, CSS и JS.
Читать кейс →Про адаптивную верстку — честно
Больше половины посетителей вашего сайта уже сидят со смартфона. Если страница криво открывается на мобильном — вы теряете их не потому что товар плохой, а потому что сайт неудобный. Google это тоже учитывает при ранжировании.
Mobile-first подход
Начинаю с мобильной версии, потом расширяю для больших экранов. Так не бывает «сломанного мобайла» — он изначально в приоритете.
Гибкие сетки
.webp)
CSS Grid и Flexbox вместо фиксированных пикселей — блоки сами находят оптимальное расположение на любом экране без лишних медиа-запросов.
Умные картинки
.webp)
Разные размеры для разных устройств через srcset. Смартфон не качает картинку для 4K-монитора — экономим трафик и ускоряем загрузку.
Брейкпоинты под реальность
.webp)
Не 600/900/1200 «по учебнику», а точки где дизайн реально начинает ломаться. Проверяю на данных реальных пользователей.
Кроссбраузерная верстка — без сюрпризов
Ваши клиенты пользуются разными браузерами, и ни один из них не должен видеть сломанный сайт. Тестирую во всех актуальных браузерах до сдачи, а не после.
Chrome
Основной браузер для проверки. Последние 3 версии.
Firefox
Часто ведёт себя иначе с CSS-трансформациями и шрифтами.
Safari
Самый капризный. Особое внимание на iOS Safari — весь трафик с iPhone.
Edge
Корпоративные пользователи по умолчанию. Не игнорируем.
Скорость — это тоже часть верстки
Красивый дизайн, который грузится 5 секунд, проиграет простому сайту с хорошей оптимизацией. Google PageSpeed — не просто метрика, это реальный пользовательский опыт.
WebP и AVIF — современные форматы изображений вместо тяжёлых JPEG
Ленивая загрузка — картинки грузятся только когда пользователь до них докручивает
Critical CSS — первый экран рендерится без ожидания всего файла стилей
Минификация — убираю пробелы, комментарии и мёртвый код перед деплоем
Цель: 90+ в PageSpeed — не декларация, а реальный рабочий ориентир
Стоимость верстки
Цена за страницу — без скрытых доплат за «адаптив» или «кроссбраузерность». Это уже включено в стандартную верстку сайта по макету. Точная цена — после брифа, зависит от объёма страниц.
Лендинг (1 страница)
Полный цикл верстки из макета. Адаптив, кроссбраузерность, оптимизация — в комплекте.
Срок: от 3–5 рабочих дней
Многостраничный сайт (до 10 стр.)
Вёрстка всех шаблонов: главная, внутренние страницы, каталог, карточка. Единая система компонентов.
Срок: от 2–3 недель
Интернет-магазин
Каталог, карточки товаров, корзина, фильтры. Интеграция в WordPress / WooCommerce по желанию.
Срок: от 3–4 недель
Email-верстка
HTML-письмо для рассылки. Работает во всех почтовых клиентах.
Срок: 1–2 дня
Переверстка / рефакторинг
Старый код мешает развитию сайта? Переписываю с сохранением дизайна — быстро и без потери позиций.
Срок: по договорённости
Итоговая стоимость зависит от сложности макета, количества страниц и нужного функционала. Пришлите макет в Telegram или на почту — отвечу с оценкой в течение дня.
90 дней после сдачи проекта бесплатно устраняю технические ошибки, допущенные по моей вине.
Почему заказывают верстку у меня
Не агентство, не фриланс-биржа — живой специалист, который сам пишет код и сам отвечает за результат. Вы всегда знаете с кем говорите и кто верстает ваш сайт.
Pixel perfect — не просто слова
Overlay макета поверх результата на каждой странице. Если дизайнер нарисовал 17px отступ — будет 17px.
Быстро без потери качества
Лендинг — 3–5 дней. Многостраничник — 2–3 недели. Не затягиваю, потому что планирую до старта.
Чистый поддерживаемый код
Никаких !important через строчку и div-в-div-в-div. Код читается и через год.
Реальные устройства
Проверяю на телефоне в руках, а не только в DevTools. Знаю где именно ломается Safari на iPhone.
Связь без пропаданий
Отвечаю в Telegram в рабочее время. Никаких «ждите 3 дня» на простой вопрос.
SEO-friendly из коробки
.webp)
Семантическая разметка, иерархия заголовков, alt-тексты, микроразметка Schema.org — сразу, без доплат.
Частые вопросы
Дизайн-макет в любом формате: Figma (ссылка с доступом), PSD, XD или Sketch.
Если есть ТЗ — отлично. Если нет — обсудим требования голосом или в переписке.
Чек-лист: как подготовить макет в Figma перед передачей
Нет — Figma для меня стандарт, а не сложность. Даже удобнее PSD: Auto Layout, точные значения отступов, готовый Inspect для CSS-значений.
Подробный разбор: чем Figma отличается от PSD при вёрстке
Коротко: знакомлюсь с макетом, собираю разметку и стили, прорабатываю адаптив, проверяю в нескольких браузерах и сдаю готовую страницу.
Пошаговая инструкция по процессу вёрстки
Зависит от количества уникальных экранов, сложности интерактива и состояния макета — точную цифру называю после того, как посмотрю файл целиком.
От чего зависят цена и сроки вёрстки
Да, напрямую: чистая семантическая разметка помогает поисковым роботам правильно считывать структуру страницы, а лишний код замедляет загрузку.
Разбор: как семантическая вёрстка влияет на SEO и скорость
Зависит от задачи: конструктор быстрее для простых визиток, а вёрстка с нуля даёт контроль над скоростью, SEO и уникальностью кода — обычно выигрывает в долгосрочной перспективе.
Подробное сравнение: вёрстка или конструктор сайта
Применяю стандартные правила адаптации — сетки схлопываются в колонку, навигация уходит в бургер. Для нестандартных элементов (сложные таблицы, виджеты) сначала согласовываю решение скетчем, а не додумываю сам.
Подробнее: адаптация макета, если есть только десктоп
Да, при условии что макет подготовлен корректно. Overlay-проверка результата с макетом — часть моего процесса. Единственное исключение — если сам макет содержит противоречия для адаптива.
Да, полностью. Весь код — ваш. Передаю через Git-репозиторий или архивом, по вашему выбору. SCSS-исходники тоже прилагаются.
Да. Берусь за отдельные компоненты, блоки или правки в существующем коде. Минимальный порог — разговор о задаче и оценка, от 30 минут.
Да, работаю удалённо по всей России. Базируюсь в Краснодаре и Новороссийске — для Краснодарского края возможны встречи очно при необходимости.