Получили дизайн‑макет в Figma, Sketch или Photoshop и не знаете, с чего начать? Ниже разберём, как последовательно превратить любой макет в чистый HTML и CSS, чтобы сайт выглядел так же, как в прототипе, и быстро откликался на разных устройствах.
1. Соберите исходники. Скачайте все изображения, иконки и шрифты, которые использованы в макете. Если дизайн построен на системных шрифтах, просто укажите их в CSS.
2. Разбейте макет на секции. Выделите шапку, навигацию, контент, боковые панели и подвал. Каждый блок получит свой <section> или <div> с понятным классом – так будет проще править код позже.
3. Набросайте структуру. Создайте базовый HTML‑файл: <header>, <main>, <footer>. Заполните их пустыми элементами, соответствующими секциям из шага 2. На этом этапе не пишем стили, только разметку.
4. Подключите CSS‑препроцессор. Если комфортно работать с SASS/SCSS, подключите его сейчас – это упростит работу с переменными и вложенностью. Если нет – обычный CSS тоже подойдет.
5. Стилизация базовых блоков. Начните с глобальных правил: box-sizing: border-box, сброс отступов, шрифты и базовые цвета. После этого переходите к отдельным секциям.
6. Верстка по сетке. Современные макеты почти всегда построены на Flexbox или CSS Grid. Оцените, где нужен горизонтальный ряд, а где – сложный массив колонок. Включайте display: grid или display: flex в соответствующие классы.
7. Адаптивность. Добавьте медиа‑запросы от 320 px до 1440 px, ориентируясь на брейкпоинты, которые указаны в дизайне. Часто достаточно двух‑трёх точек: мобильный, планшет и десктоп.
8. Оптимизация изображений. Сжмите JPG/PNG через TinyPNG, а для иконок используйте SVG. Подключайте srcset и picture, если нужны разные размеры для разных экранов.
9. Тестирование. Откройте страницу в Chrome DevTools, переключите режимы устройств и проверьте, не выпадает ли контент за пределы экрана. Проверьте работу клавиатурных навигаций и контрастность текста.
10. Финальная очистка. Удалите неиспользуемый CSS, сожмите файлы через cssnano и включите кеш‑заголовки. Теперь макет готов к публикации.
• Figma Inspect – показывает размеры, отступы и готовый CSS‑код для большинства элементов.
• Visual Studio Code + Emmet – ускоряет набор разметки и стилей, благодаря сокращениям.
• Stylelint – проверка качества CSS, помогает избежать забытых свойств.
• PostCSS + Autoprefixer – автоматически добавит вендорные префиксы для кросс‑браузерности.
• BrowserSync – живой перезапуск страницы при изменениях, экономит время на ручные обновления.
Эти инструменты бесплатные, легко настраиваются и почти мгновенно повышают производительность.
Итого: берёте макет, делаете план, пишете чистый HTML, накладываете стили по сетке, добавляете адаптивность и проверяете в разных браузерах. Следуя этим простым шагам, вы сможете сверстать любой макет без лишних головных болей и сразу видеть результат, который совпадает с дизайном.
