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

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

⚡ Кратко

Топ-ошибок капстоуна: красиво только на десктопе; навигация без клавиатуры; картинки без alt/width/height; CSS без структуры; проект не прогнан через валидатор и Lighthouse.

Частые ошибки финального проекта

  • Главная выглядит хорошо, но внутренние страницы не адаптивны.
  • Навигация работает мышью, но не проверена клавиатурой.
  • Изображения не имеют width, height, alt, srcset и sizes.
  • CSS разросся без структуры tokens/base/components/utilities.
  • Проект не прогнан через validator и Lighthouse.

Ошибка №1: картинка без размеров «прыгает»

Как ломается: у <img> нет width/height — пока файл грузится, места под него нет, и при загрузке контент резко сдвигается (плохой CLS).

❌ без размеров — текст подпрыгнет, когда картинка догрузится

<!-- ❌ браузер не знает размер заранее -->
<img src="hero.jpg" alt="Hero">

<!-- ✅ место зарезервировано, сдвига нет -->
<img src="hero.jpg" alt="Hero" width="960" height="640" loading="lazy">

Ошибка №2: фокус не виден

Как ломается: кто-то «убирает уродливую обводку» через outline: none — и сайт становится непроходим с клавиатуры. Правильно — заменить обводку видимым :focus-visible, а не убрать.

/* ❌ так нельзя */
button:focus { outline: none; }

/* ✅ заметный фокус для клавиатуры */
button:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

Навигация