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

Задача: Создайте fluid-шкалу для hero-секции: заголовок через clamp(), лид-текст с max-width: 65ch, секционные и карточные отступы — через CSS custom properties (--space-*). Без единого @media для размеров.

Подготовьте окружение

Создайте папку lesson-37/ с файлами index.html и styles.css, подключите стиль через <link rel="stylesheet" href="styles.css">. Внешние зависимости не нужны.

Объявите шкалу в :root

Заведите переменные размеров (--step-0, --step-5) и отступов (--space-section, --space-card), каждая — отдельный clamp(). Это ваша модульная шкала.

Соберите hero

Заголовок: font-size: var(--step-5); max-width: 12ch; line-height: 1. Лид: font-size: var(--step-0); max-width: 65ch; line-height: 1.6. Секция: padding-block: var(--space-section).

Проверьте вручную

Откройте DevTools (F12) и плавно тяните правый край окна от ~360px до ~1920px. Заголовок и отступы должны меняться непрерывно (без скачков), упираясь в min/max; строки лида остаются короткими.

Критерии приёмки

Заголовок использует clamp() и не мельче min на телефоне, не крупнее max на десктопе.
Лид ограничен по ch — строки короткие и читаемые на широком экране.
Отступы заданы через var(--space-*) и меняются плавно (fluid spacing).
Нет горизонтального скролла ни на одной ширине.
Для размеров нет ни одного @media (раскладку при желании можно менять отдельно).

Связь с уроком: теория объясняет clamp() и единицы (📖 Теория), готовый код — в примерах (💻 Примеры), эталон — в решениях (✅ Решения).

Урок 37. Домашнее задание: Адаптивная типографика и отступы

⚡ Кратко