HTML и CSS: вёрстка интерфейса

HTML описывает смысл

Первое, что делает frontend-разработчик с макетом кофейни «Зерно», — размечает страницу HTML. Важно описывать смысл элементов, а не их вид:

<header>
  <a href="/" class="logo">Зерно</a>
  <nav>
    <a href="#menu">Меню</a>
    <a href="#contacts">Контакты</a>
  </nav>
</header>
<main>
  <h1>Кофе с собой за 5 минут</h1>
  <section id="menu">
    <h2>Меню</h2>
    <ul class="menu">
      <li class="drink">…</li>
    </ul>
  </section>
</main>

Теги header, nav, main, section выглядят как обычные блоки, но несут смысл. Поисковики понимают, где главное содержимое, программы экранного доступа позволяют незрячим людям сразу перейти к навигации, а другой разработчик быстро разберётся в коде.

Частая ошибка новичков — делать всё из div: кнопку из div, ссылку из div. Внешне похоже, но такую «кнопку» нельзя нажать с клавиатуры.

Блочная модель

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

• content — содержимое: текст или картинка;
• padding — внутренний отступ от содержимого до рамки;
• border — рамка;
• margin — внешний отступ до соседних элементов.

.drink {
  padding: 16px;
  border: 1px solid #e5ddd5;
  border-radius: 12px;
  margin-bottom: 12px;
}

Если в макете между текстом и краем карточки 16 пикселей, это padding, а если между карточками — margin или gap. Точная вёрстка начинается с умения отличить одно от другого.

Раскладка: Flexbox и Grid

Flexbox раскладывает элементы в одну линию — строку или столбец. Идеально для шапки: логотип слева, меню справа.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid раскладывает по сетке из строк и колонок. Подходит для меню из карточек:

.menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

repeat(3, 1fr) означает «три колонки равной ширины». Как сделать, чтобы на телефоне карточки шли в одну колонку, — в уроке 4.

Работа с макетом

Дизайнер передаёт макет в Figma. Frontend-разработчик берёт оттуда точные значения: размеры шрифтов, цвета, отступы, скругления. Вёрстка «на глаз» почти всегда заметна — дизайнер увидит, что отступы плавают, а заголовки разного размера.

Подробно HTML и CSS разобраны в курсе «HTML и CSS» — если тема новая, начните с него.

<li class="drink">
  <img src="latte.jpg" alt="Латте в высоком стакане с рисунком на пенке">
  <h3>Латте</h3>
  <p>Эспрессо и много молока</p>
  <p class="price">250 ₽</p>
  <button type="button">В корзину</button>
</li>