Урок 50. Задания: Итоговый проект: адаптивный многостраничный сайт

📁 Раздел: Итоговый проект ⏱️ Время изучения: ~120 мин 🎯 Сложность: Продвинутая
#min #width #minmax #clamp #font-size #media #focus-visible #prefers-reduced-motion

⚡ Кратко

Соберите 4 страницы с общей навигацией, hero, карточками, формой и footer; добавьте адаптивность и проверьте качество. Ниже — целевой каркас и пошаговые задания.

Целевой результат

Каждая страница должна повторять один каркас: шапка с навигацией, контент (hero / карточки / форма) и подвал.

header / nav hero / контент форма footer
Каркас, который повторяется на всех четырёх страницах.

Задания

  1. Создайте структуру из четырёх страниц: главная, работы, о нас, контакты.
  2. Сделайте общую навигацию и активное состояние текущей страницы (aria-current="page").
  3. Соберите hero, карточки работ, форму контактов и footer.
  4. Добавьте адаптивные изображения (picture/srcset) и media queries.
  5. Проверьте HTML, CSS, клавиатуру и Lighthouse.
Ожидаемое поведение: на 320px всё в одну колонку, на ≥1024px hero — в две колонки, карточки — в несколько (auto-fit). Навигация проходится с клавиатуры, фокус виден.

Навигация