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

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

⚡ Кратко

Большое финальное ДЗ: соберите свой адаптивный сайт из 4 страниц по плану ниже и проверьте по критериям приёмки (валидатор + DevTools + Lighthouse).

Полное условие итогового проекта

Задача: сверстайте многостраничный адаптивный сайт для студии, портфолио или учебного продукта. Минимум четыре страницы: главная, работы, о нас, контакты.

Требования

  • Семантическая структура и единая навигация.
  • Flexbox и Grid используются по назначению.
  • Адаптивность: mobile/tablet/desktop, clamp(), media queries.
  • Изображения: picture, srcset, sizes, корректные alt, width, height.
  • Доступность: label, :focus-visible, клавиатура, контраст.
  • Качество: HTML/CSS validation и Lighthouse-аудит.

Пошаговый план

  1. Нарисуйте карту страниц и повторяемые компоненты.
  2. Соберите HTML без стилей и проверьте семантику.
  3. Добавьте CSS tokens и базовые стили.
  4. Соберите layout и адаптивность.
  5. Пройдите чек-листы из справочников.
📄 final-project/index.html
<header class="site-header">
  <a class="logo" href="index.html">Studio</a>
  <nav aria-label="Главная навигация">
    <a href="work.html">Работы</a>
    <a href="about.html">О нас</a>
    <a href="contact.html">Контакты</a>
  </nav>
</header>
<main>
  <section class="hero">
    <div>
      <h1>Адаптивный многостраничный сайт</h1>
      <p>Семантика, Grid, Flexbox, изображения и доступность.</p>
    </div>
    <picture>
      <source type="image/webp" srcset="hero.webp 960w, hero@2x.webp 1920w"
              sizes="(min-width: 64rem) 50vw, 100vw">
      <img src="hero.jpg" alt="Пример главной страницы" width="960" height="640">
    </picture>
  </section>
</main>

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

  • ✅ Все 4 страницы открываются с диска и связаны навигацией; текущая страница помечена aria-current="page".
  • ✅ На 320px нет горизонтального скролла; на ≥1024px hero — в 2 колонки, карточки — в несколько.
  • ✅ Каждое поле формы связано с <label>; весь сайт проходится клавишей Tab, фокус виден.
  • ✅ У всех картинок есть alt, width, height; для нижних — loading="lazy".
  • ✅ W3C Markup и CSS Validator — без ошибок; Lighthouse: Accessibility и Best Practices ≥ 90.

Как проверить (DevTools и валидаторы)

  1. Адаптивность: F12 → Toggle device toolbar (Ctrl+Shift+M) → прогоните 320 / 768 / 1024 / 1440px.
  2. Сетка: в Elements выберите grid-контейнер и включите overlay «grid»/«flex», чтобы увидеть линии.
  3. Клавиатура: кликните в адресную строку и жмите Tab — фокус должен идти по ссылкам и кнопкам по порядку и быть видимым.
  4. Валидация: прогоните HTML через validator.w3.org, CSS — через jigsaw.w3.org/css-validator.
  5. Аудит: вкладка Lighthouse → Analyze page load → проверьте 4 категории.

Навигация