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

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

⚡ Кратко

Финальный проект — синтез всего курса. Собираем адаптивный многосекционный сайт: семантический header/nav на Flexbox, hero на Grid с fluid-типографикой (clamp()), сетку карточек на grid-template-columns: repeat(auto-fit, minmax(...)), доступную форму и footer.

  • Порядок сборки: семантика и навигация → крупная сетка (Grid) → выравнивание внутри (Flexbox) → адаптивные изображения → темы и доступность.
  • Подход mobile-first: базовые стили для телефона, @media (min-width: …) добавляет колонки на широких экранах.
  • Финальный чек-лист качества: семантика · адаптивность · доступность · производительность · валидность · БЭМ-именование.

Главная идея

Это капстоун: за 49 уроков ты собрал отдельные «детали» — семантику, блочную модель, Flexbox, Grid, медиазапросы, темы, доступность. Финальный урок не вводит новой темы — он показывает, как соединить всё в один работающий сайт по чёткому плану.

Сборка дома из готовых деталей по чертежу. Семантические теги — это несущие стены и комнаты (где спальня, где кухня — браузер и скринридер понимают планировку). CSS-сетка Grid — это план этажа: где крупные зоны. Flexbox — расстановка мебели внутри комнаты. Медиазапросы — складная мебель, которая раскладывается на просторной квартире и компактно сворачивается в студии. А чек-лист качества — это приёмка дома: проверяем проводку (доступность), фундамент (валидность) и теплоизоляцию (производительность), прежде чем заселяться.

Как спланировать проект

Сначала чертёж, потом код. Нарисуй карту сайта (страницы и повторяемые блоки) и каркас одной страницы (wireframe) сверху вниз: header → hero → секции → footer. Так ты увидишь, какие блоки общие, и вынесешь их в одинаковые классы.

Десктоп header / nav (flex) hero (grid 1fr 1fr) cards (auto-fit) форма (label + input) footer Моб. всё в 1 колонку
Один каркас, две раскладки: на десктопе hero и карточки идут в несколько колонок, на телефоне — стопкой в одну.

Структура и порядок сборки

Итоговый сайт состоит из четырёх страниц: index.html, work.html, about.html, contact.html. Общие стили лежат в styles.css, изображения — в assets/img/, а повторяемые блоки (header, footer, карточка) используют одинаковые классы. CSS делим на слои: tokens (переменные в :root) → base (сброс и типографика) → components (карточка, кнопка, форма) → utilities (вспомогательные классы).

Сначала проектируем семантику и навигацию, затем крупную сетку через CSS Grid, внутреннее выравнивание — через Flexbox, после этого добавляем адаптивные изображения и preference-медиазапросы (prefers-reduced-motion, prefers-color-scheme).

Базовый CSS: токены и каркас

📄 final-project/styles.css
:root {
  color-scheme: light dark;
  --space-page: clamp(1rem, 3vw, 2rem);
  --space-section: clamp(3rem, 8vw, 7rem);
  --color-accent: #2563eb;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.site-header,
.hero {
  width: min(100% - var(--space-page) * 2, 72rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1rem;
}

.hero {
  display: grid;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: var(--space-section);
}

@media (min-width: 64rem) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

Чек-лист качества финального проекта

  • Семантика — теги по смыслу (header, nav, main, section, footer), один h1 на страницу. (уроки 45 БЭМ, 46 ошибки)
  • Адаптивность — mobile-first, проверка на 320/768/1024/1440px. (уроки 33–34 media, 37 fluid type)
  • Доступность — alt у картинок, контраст, видимый :focus-visible, навигация с клавиатуры.
  • Производительность — loading="lazy" для картинок ниже первого экрана, width/height против сдвига вёрстки. (урок 49)
  • Валидность — прогон через W3C Markup и CSS Validator. (урок 48)
  • Именование — единый стиль классов (БЭМ): card, card__title, card--featured.
Частая ошибка: сначала «красиво на десктопе», потом «как-нибудь под телефон». Так почти всегда ломается: фиксированные width в пикселях не помещаются на узком экране. Делай наоборот — базовый стиль под мобильный, а колонки добавляй медиазапросом min-width.

Навигация