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

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

⚡ Кратко

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

О чём урок

Вы соберёте статичный landing на уже изученных инструментах: семантическая HTML-структура, блочные контейнеры, отступы, позиционирование, слои и аккуратная декомпозиция секций.

Структура урока

Теория

Как читать макет и разбивать страницу на секции.

Справочник

Свойства для статичного layout.

Примеры

Header, hero, карточки, footer.

Старый vs Новый

Табличный layout против семантики.

Задания

Подготовка landing-проекта.

Решения

Пошаговая сборка.

Ошибки

Неправильные отступы и структура.

Домашнее задание

Мини-проект 2: статичный landing.

Ресурсы

Чек-листы и референсы.

Практика

  • Нарисовать карту секций landing.
  • Сверстать header, main, hero, features и footer.
  • Проверить, что страница читается без CSS.

Навигация