Урок 34. Домашнее задание: Mobile-first подход

📁 Раздел: Адаптивная вёрстка ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#min-width #content

⚡ Кратко

Строим CSS от маленького экрана к большому: базовые правила подходят для телефона, а через @media (min-width: …) добавляются колонки, сложная навигация и расширенные отступы.

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

Задача: Сверстайте mobile-first страницу курса: на телефоне всё идёт одной колонкой, с 48rem появляется горизонтальная навигация, с 64rem добавляется aside.
1

Создайте HTML

Используйте семантические блоки и понятные классы.

2

Напишите базовый CSS

Сначала добейтесь читабельной версии без лишних breakpoint.

3

Проверьте ширины

Откройте DevTools и проверьте 320px, 768px, 1024px и 1200px.

Мини-чеклист

  • Нет горизонтального скролла.
  • Текст остаётся читаемым.
  • Breakpoint объясняется содержимым, а не случайным числом.

Навигация