Урок 11. Задания
⚡ Кратко
Три задания на адаптивность и четыре вопроса.
Задания
Задание 1. Секция «Возможности»
Заголовок, подзаголовок и шесть карточек. Одна колонка на мобильном, две от 640px, три от 1024px. Отступы секции: 16px по бокам на мобильном, 32px от 768px. Заголовок 24px на мобильном и 36px от 768px.
Задание 2. Меню только для планшета
Сделайте панель быстрых ссылок, которая видна только в диапазоне 640–1024px: на телефоне её заменяет кнопка меню, на десктопе — полное меню в шапке.
Задание 3. Компонент для двух мест
Соберите карточку уведомления так, чтобы она сама перестраивалась: в широком контейнере — иконка слева от текста, в узком — сверху. Используйте container queries, а не медиазапросы.
Проверка понимания
Выберите один вариант ответа — правильный подсветится после клика.
Вопрос 1
Что означает приставка md:?
Вопрос 2
Какой класс задаёт мобильную версию в подходе mobile-first?
Вопрос 3
Чем container query отличается от медиазапроса?
Вопрос 4
Как показать элемент только в диапазоне 640–1024px?