Верстка HTML/CSS по скриншоту: шаги для качественной верстки сайта

Верстка HTML/CSS по скриншоту: как не мучиться по ночам и собрать сайт, который не развалится

Есть особый вид боли, знакомый каждому, кто хоть раз открывал Фигму: тебе прислали скриншот макета, сказали «ну тут простая верстка html css, на денёк работы», и исчезли. Ты увеличиваешь картинку до 400%, пытаешься понять, это межстрочный интервал такой или дизайнер просто устал от жизни, а потом еще два дня ловишь пиксели в DevTools и убеждаешь себя, что ты вобще-то нормальный специалист. Знакомо? Вот про это и поговорим — как верстать сайт по скриншоту или макету так, чтобы и дизайн не убить, и нервы не сдать в аренду психотерапевту.

HTML верстка по скриншоту — это в сущности перевод с языка картинки на язык браузера. Как брать макет сайта, аккуратно разрезать его в голове на блоки, собрать нормальную верстку сайта html, добавить адекватный css, а потом еще и автоматизировать всё так, чтобы правки клиента не превращались в личный апокалипсис. И да, тут будет про make.com, потому что тратить жизнь на ручные рутинные действия — это уже, честно, несерьезно. Особенно когда всё можно отдать на съедение автоматизации.

ШАГ 1. Смотреть на макет не как дизайнер, а как злой верстальщик

Первый инстинкт, когда тебе скинули макет или просто скриншот: приблизить, восхититься шрифтами и сказать «ну красиво же». Это ловушка. Для верстки html css по макету Фигма или по скриншоту нужно не любоваться, а разбирать. Представь, что ты хирург, но вместо органов — блоки. Видишь шапку сайта — сразу делишь в голове на логотип, меню, кнопку, возможно бургер. Видишь баннер — фон, заголовок, подзаголовок, кнопка, картинка. И так весь макет, пока твой мозг не начнет автоматически видеть не «вау, лендинг», а «header, hero, features, reviews, footer».

Разовый лайфхак: открой макет в Фигме (если есть доступ, а не просто сказочный скриншот), включи обводки или сетку, посмотри на отступы. Большинство новичков в html верстке залетают именно тут — делают отступы «на глаз», а потом сайт по макету фигма вроде похож, но будто его собрали в маршрутке. Нормальная верстка страниц html начинается именно с уважения к пикселю и вниманию к визуальной иерархии. Вопрос «как верстать макет сайта» на самом деле переводится в «сначала пойми архитектуру, потом трогай код».

ШАГ 2. Чистый HTML: сначала скелет, потом украшения

Когда структура в голове сложилась, приходит время основ html верстки. Это скучная, но святая часть: ты садишься и пишешь html код верстка за версткой без единой строчки CSS. Тупо каркас. Header, main, footer. Внутри — секции, в них контейнеры, в них уже контент. Если ты с нуля сразу начинаешь лепить и классы, и отступы, и цвета, и flex, и grid — потом сам же в этом застрянешь. Нормальная верстка html с нуля похожа на стройку: сначала фундамент, потом стены, а уже затем «давайте тут плиточку покрасивее».

Используй семантику, а не только бессмертный див. Меню — nav, подвал — footer, основной контент — main, заголовки по иерархии, а не всюду h3, потому что «так привычно». Это не только SEO, это еще и элементарное уважение к себе: через месяц, когда будешь что-то допиливать, поблагодаришь себя за то, что верстка макета html получилась читаемой, а не «див в диве, дивом погоняет». И, да, не забывай вставлять реальные тексты, а не бесконечный lorem, если есть доступ к контенту. Жизнь показывает, что тексты никогда не влезают туда, куда влезал лорем, и лучше об этом узнать сразу.

ШАГ 3. CSS: аккуратно, без «я потом перепишу»

Когда HTML-скелет готов, начинается странная магия: страница перестает быть белым полотном и превращается во что-то, отдаленно похожее на дизайн. Тут и начинается самая частая ошибка. Вместо продуманной системы стилей начинается «пойду-ка я прямо так и накидаю, потом причесать можно». Спойлер: нельзя. Потом будет еще три макета и правки, а ты будешь сидеть ночью и бояться удалить один класс, чтобы не отвалились четыре секции.

Лучше сразу выдели базовые вещи: шрифты, цвета, отступы, контейнеры. Сделай пару utility-классов под часто повторяющиеся штуки. Если работаешь с гридом или флексами, продумай, как они будут вести себя на широком и узком экране. HTML адаптивная верстка — это не «потом сделаю медиазапрос на 768», это мыслительный процесс: а что будет, если заголовок станет в две строки, а текст в три? А если кнопка поедет вправо? А если какой-нибудь герой зайдет с Samsung на 360 ширины и проклянет весь интернет, включая тебя?

ШАГ 4. Адаптив: телефон — не побочный квест, а основной

Мобильная версия — это не «ну, там, сожму всё». Сейчас половина людей заходит с телефона, а то и больше, особенно если это не корпоративный портал, а лендинг, магазин или страница услуги. Поэтому верстка html css с нуля в 2025 году без нормального адаптива — это прям «я делаю вид, что у пользователей нет смартфонов». Сначала можно делать в десктопном варианте, это ок, но уже в процессе нужно держать в голове: как этот блок поведет себя при 1024, при 768 и ниже.

Нормальный подход к адаптиву: сначала прописать общие стили, потом медиазапросы сверху вниз или снизу вверх — тут уже религия. Главное — не лепить хаотично. И не бойся кое-где менять структуру блоков именно в мобилке, если это делает сайт читабельным. Дизайнеры мыслят иногда слишком «мониторно», а пользователи открывают сайт в метро на стареньком iPhone. HTML верстка по скриншоту — это не тупой копипаст пиксель в пиксель, а разумная адаптация.

Где тут автоматизация и при чем тут make.com

И вот тут начинается самое вкусное. Верстка страниц html — это не только «сел и сверстал». Это ещё сто мелких рутин: залить на сервер, проверить, обновить, скинуть клиенту ссылку, сделать резервную копию, синхронизировать с GitHub, развернуть тестовую версию, отправить уведомление в Telegram «готово, смотрите». Если ты делаешь по одному сайту в год — еще как-то можно жить руками. Но если работаешь постоянно, то тратить на это время руками — примерно как стирать одежду в реке, стоя по колено в ледяной воде, когда у тебя дома стиралка стоит.

Вот тут и выезжает make.com, платформа для автоматизаций, которая тихо берет рутину на себя. Можно настроить сценарий, что как только ты пушишь изменения в GitHub, автоматически идет деплой на хостинг, в Telegram падает сообщение «новая сборка», а куда-нибудь в Google Sheets записывается дата и комментарий. Или, например, клиент на Tilda или Notion оставляет заявку — автоматически создается задача в твоем трекере, поднимается новый черновик проекта, а тебе приходит напоминание в мессенджер. Однажды собираешь схему, потом просто живешь спокойнее.

Если хочешь нормально освоить такие штуки, а не по принципу «я нашел тут один туториал на YouTube, вроде работает», посмотри наше обучение по make.com. Там именно про реальную работу, когда у тебя не один тестовый проект ради галочки, а реальные заказы, дедлайны и желание спать ночью.

Подробности и программа: обучение по make.com

Верстка + автоматизация: когда сайт живет сам, а ты не в заложниках

Большинство людей останавливаются на уровне «я умею сверстать страницу, вроде адаптивно». На этом месте тоже можно жить, но будет много боли. Настоящая взрослая история начинается, когда к верстке сайта html добавляются автоматизации. Например, ты делаешь шаблон лендинга, и хочешь, чтобы новый лендинг для клиента собирался не «заново верстать», а по заготовке. Контент ему удобно заносить в Notion или Google Sheets, а дальше make.com забирает данные и на основе твоего исходного html кода собирает готовую страницу, загружает на сервер и отправляет тебе ссылку на проверку.

Или ты продаешь свои курсы по html css верстке с нуля. Можно, конечно, вести людей в личку, высылать ссылки вручную, отмечать оплату «в тетрадке». А можно подключить оплату, настроить через make.com автоматическую выдачу доступа, отправку писем и сообщений, добавление в закрытый Telegram-канал и выдачу чек-листов. Та же история с продажей услуг: пришла заявка — автоматически создана карточка клиента, прикреплен его макет, заведены задачи, отправлено письмо с благодарностью. Никакая верстка макета html сама по себе этого не даст, пока ты не заведёшь себе привычку смотреть на процессы не только в коде, но и вокруг него.

Кстати, если тебе интересно не только верстать по скриншоту, но и выстраивать вокруг этого нормальный рабочий процесс, подписывайся на наш Telegram-канал. Я там регулярно разбираю живые кейсы: что автоматизировать, где именно make.com уместен, а где лучше не городить огород и сделать руками.

Чуть-чуть про курсы, но без «стань профи за 3 дня»

Курсы по верстке обычно делятся на два типа. Первые учат, как правильно написать div class=»container» и не сломать браузер. Вторые показывают, как верстать макет по Фигме, но забывают, что где-то там есть реальная жизнь с клиентами, дедлайнами, изменениями текста «подправьте там абзацик, ну что вам, сложно?», и необходимостью не забыть, что вчера ночью ты деплоил не ту ветку. Я делаю обучение именно для тех, кто хочет в итоге не просто знать теги, а построить систему работы: от «мне кинули скриншот» до «сайт ушел в прод, все задокументировано, бэкап есть, автоматизации работают».

Есть отдельные программы по make.com: обучение по make.com и подписка на готовые блюпринты по make.com. Блюпринты — это по сути собранные под ключ схемы автоматизаций. Ты не сидишь, не страдаешь над каждым модулем, а берешь готовый рабочий скелет, меняешь доступы и данные под себя и используешь. Особенно удобно, если ты уже умеешь верстать сайт по макету, но не хочешь тратить недели на то, чтобы придумать, как связать всё с CRM, платежами и уведомлениями.

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

Сайты будут нужны всегда, просто меняется то, как их делают. Раньше верстальщик был человеком, который HTML знал чуть лучше соседа. Сейчас мало кому достаточно уметь честно натянуть макет на страницу. Нужен человек, который понимает, как связать верстку с API, как сделать сайт не просто красивой визиткой, а рабочей частью бизнес-процесса: формы, интеграции, уведомления, отчеты. И в этой точке умение мыслить и кодом, и автоматизациями — это уже не «приятный бонус», а местами решающий фактор, почему выбирают именно тебя, а не соседа с условным «я за 3 тысячи тоже сверстаю».

Если разобрался в верстке, потом добавил знания по make.com, потом подключил нейросети, которые помогают тебе генерировать куски кода, тесты, документацию — у тебя получается набор навыков, с которым можно относительно спокойно смотреть на завтрашний день. Не в смысле «золотые горы», а в смысле «у меня есть что продать миру, помимо своего времени в формате бесконечных правок по выходным».

Если хочешь учиться дальше и разложить всё по полочкам — от верстки html с нуля до автоматизаций процессов вокруг разработки — заглядывай в программы: обучение по make.com и готовые блюпринты по make.com. А если не уверен, нужно ли тебе это, просто поброди по нашему Telegram-каналу, там хватает примеров из реальных задач.

FAQ по верстке HTML/CSS по скриншоту и автоматизации процесса

Как начать верстку html с нуля, если у меня только скриншот без исходников?
Разбей скриншот на блоки: шапка, первый экран, блоки преимуществ, отзывы, подвал. Сначала сделай чистый HTML-скелет, ориентируясь на визуальную иерархию. Только потом подключай CSS и начинай подгонять отступы, шрифты, цвета. Для измерения можно использовать расширения браузера с линейкой или банально Фигму — просто вставь скриншот и померь расстояния.

Как верстать по макету Figma, чтобы всё совпало с дизайном?
Не ленись смотреть свойства элементов в самой Фигме: размеры, отступы, line-height, letter-spacing. Используй сетку контейнера (например, 1200 px ширины по центру) и не придумывай свои отступы «на глаз». Начни с десктопа, потом продумай мобильную версию: иногда логичнее переставить блоки местами или сделать их в столбик, чем насиловать пользователя мелким текстом в две колонки.

Нужен ли JavaScript, если я делаю только верстку страницы html?
Если в макете есть модальные окна, слайдеры, табы, выпадающие меню — да, без JS тут никак. Но для начала можешь использовать готовые небольшие библиотеки или свои простые скрипты, вместо того чтобы тащить огромные фреймворки ради одной кнопки. Главное — сначала сверстать все статично, а уже потом добавлять интерактив, иначе быстро потеряешься в хаосе.

Где лучше хранить и разворачивать проекты, чтобы ничего не потерять?
Минимальный набор: GitHub или GitLab для кода, хостинг или VPS для продакшена, отдельный тестовый домен/поддомен для проверки. Через make.com можно автоматизировать деплой: пушишь в нужную ветку — сборка уходит на сервер, тебе в Telegram падает сообщение, что всё обновилось. Пара часов настройки — и минус десятки рутинных действий каждую неделю.

Можно ли автоматизировать работу с клиентами, если я только верстаю?
Да, и это прям спасает нервы. На том же make.com можно связать формы заявок, почту, таблицы и мессенджеры: заявка пришла — создалась запись в Google Sheets, клиенту ушло письмо с анкетой, тебе — сообщение в Telegram с деталями. Плюс можно автоматически создавать папки на диске, задачи в трекере, шаблонные документы. Готовые схемы можешь взять в разделе блюпринты по make.com.

Где учиться автоматизациям, если я уже умею верстать, но в интеграциях ноль?
Если базовая верстка html css у тебя уже в руках, то логичное продолжение — практическое обучение по make.com: реальные кейсы, интеграции с популярными сервисами в России, работа с Telegram, CRM, оплатами. Подробное описание и программы лежат здесь: обучение по make.com. Ну и не забывай про наш Telegram-канал — там много разборов «до и после» с живыми задачами.