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

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

⚡ Кратко

Возьмите desktop-first макет из трёх колонок и добавьте два max-width breakpoint: на планшете aside уходит вниз, на телефоне всё становится одной колонкой. Проверьте на 320 / 768 / 1024 / 1200px — без горизонтального скролла.

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

Задача: Возьмите desktop-first макет из трёх колонок и добавьте два max-width breakpoint: на планшете aside уходит вниз, на телефоне всё становится одной колонкой.
1

Создайте HTML

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

2

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

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

3

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

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

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

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

Навигация