Урок 21. Задания: Основы макетирования и статичный landing

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#min #width #margin-inline #padding-block #display #position

⚡ Кратко

Макетирование начинается не с CSS-свойств, а с разбиения страницы на смысловые блоки. В этом уроке собирается статичный landing: header, main, секции, карточки и footer.

Задания

Цель — собрать каркас лендинга по шагам. Ниже эскиз ожидаемого результата.

header (sticky) hero: заголовок + кнопка features: карточки CTA footer
К этому каркасу нужно прийти к концу заданий.
  1. Карта секций. Опишите структуру landing из 5 блоков: header, hero, features, CTA, footer. Подпишите, что внутри каждого.
  2. HTML без CSS. Создайте разметку и откройте её без стилей. Проверьте, что порядок чтения сверху вниз логичен (предложение → выгоды → действие → контакты).
  3. Контейнер и ритм. Добавьте общий .container с max-width и margin-inline: auto, одинаковый padding-block секциям и стили для кнопки.
  4. Sticky-header. Сделайте position: sticky; top: 0 для шапки и проверьте, что она не перекрывает начало hero (фон, z-index).
Подсказка по проверке: отключите CSS (DevTools → Rendering → или просто уберите <link>). Если страница всё ещё читается как осмысленный документ — каркас верный.

Навигация