Как сверстать сайт по макету

Автор: MaxGraph

Содержание

Вступление

Привет! Представь, что ты открыл свой первый макет в Figma (например, такой). Что же делать дальше? Как распланировать процесс работы так, чтобы верстка была простой, гибкой и удобной? Давайте разбираться.

Первичный осмотр макета

Первым делом нужно осмотреть весь макет, чтобы сразу увидеть все подводные камни, одинаковые элементы и т.д. Смотрите по принципу "Большой блок - маленький блок", сперва обращая внимание на секции, а затем на внутренности этих секций.

Структура страницы

Выделите все структурные элементы страницы:

<header> - шапка сайта
<main> - главный контент на странице
<section> - разделы страницы
<footer> - подвал сайта

Далее стоит смотреть вглубь этих разделов, и здесь поможет известная всем схема Holy Grail Layout (англ. Святой Грааль). Так эту схему назвали верстальщики, ведь практически каждый сайт использует ее.

Схема эта конечно немного утрирована, и aside на сайте вы скорее всего не встретите, но общая концепция такова.

Внутренний контент

После разделения страницы на структурные блоки стоит посмотреть внутрь их - распознать, где ссылки, где абзацы, где выпадающее меню и т.д.

Отметьте себе:

Заголовки - и заголовок всего документа, и отдельные - <h1>-<h6>
Абзацы с текстом или просто мелкие надписи - <p> или <span>
Фразовые элементы - изображения, ссылки, кнопки, видео, и так далее.

С этим помогут наши статьи Разбор базовых HTML-тегов и Семантические теги в HTML, или же мои видео на Youtube: Назначение HTML-тегов

Когда вы сделаете это, у вас уже будет готовая схема верстки.

Редактор кода

Подготовьте редактор кода к работе (это может быть VS Code):

Установите плагин EditorConfig for VS Code, он нужен для написания кода в едином стиле
Установите плагин Live Server для быстрого обновления страницы при сохранении

После этого подготовьте себе правильную структуру проекта. Как правило, она всегда одна:

Структура проекта — Типичная структура проекта

Скачать архив с базовой структурой проекта

Разметка

После подготовки проекта стоит приступить к его разметке, без стилей:

Создайте страницу index.html (или используйте страницу из приложенной выше структуры)
Разметьте всю страницу - ссылки, кнопки, заголовки и так далее
Напишите правильный lang и <title> для страницы.

Не запутаться в тегах помогут наши статьи, ссылки на них размещены выше.

Базовая стилизация

Теперь нужно сделать базовую стилизацию проекта. Это - базовые сбросы и normalize.css, а также подключение шрифтов.

Normalize.css нужен, чтобы привести различия между элементами в разных браузерах к одному виду.

Базовый сброс, который я рекомендую для проектов:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

body {
  font-family: 'font', sans-serif;
}

Далее подключаем шрифты. Сейчас для всех проектов достаточно формата woff2:

@font-face {
  font-family: 'Muller';
  src: url('../fonts/MullerLight.woff2') format('woff2'),
    url('../fonts/MullerLight.woff') format('woff');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

Помимо этого можно также набросать фон, кастомные свойства (css-переменные), начать выделять в отдельные классы одинаковые элементы.

Работа с графикой

На этом этапе можно вырезать всю графику из Figma, чтобы потом было проще работать. Необходимо помнить важные правила:

Если изображение контентое (важное для повествования, смысла) - используем тег <img>
Если же декоративное - есть два варианта. Если иконка будет менять цвет в результате действий пользователя - используйте тег <svg>, если нет - используйте background-image.

И также не забывайте о форматах изображений:

Для изображений, не требующих прозрачности, используйте формат jpg
Для изображений с прозрачным фоном - png
Для иконок - svg

Также рекомендую использовать формат webp для лучшей оптимизации сайта.

Структурный CSS

Теперь пора переходить к тому, чтобы стилизовать структуру:

Выделить контейнер
Сделать сетку - разместить элементы на своих местах, сделать между ними отступы и т.д.

Для большой структурной стилизации (списки контента, карточки и т.д.) советую CSS Grid, для мелкой (меню и т.д.) - CSS FlexBox.

Декоративный CSS

Теперь стоит "допилить" стили проекта - полностью сделать все в соответствии с макетом, попутно добавляя различные декоративные элементы и так далее.

Адаптив

Последний этап перед продакшном - это адаптивная верстка. Проверьте, чтоб ваш сайт идеально смотрелся на любом устройстве. Здесь можно использовать:

Media-запросы
Элемент <picture> для создания адаптивных изображений
Относительные единицы измерения, такие как % и т.д.

Впрочем, тема адаптива - отдельная сложная тема, которую не рассказать внутри одной статьи. Но вы можете посмотреть видео на моем канале: Адаптивная верстка

Заключение

Если вы сделали все предыдущие пункты, ваша верстка готова. Остается лишь проверить его, чтобы убедиться в правильности, и можно в прод!

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

Удачи в работе!

Полезные ссылки

предыдущий пост следующий пост