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

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

⚡ Кратко

Слабый проект: «дивный суп» из <div>, обработчики на не-кнопках и фиксированная ширина в пикселях. Сильный проект: семантика, настоящие <button>, гибкий контейнер min(100% - 2rem, 72rem).

Контейнер: фиксированный px → гибкий

Из лекции (старое): жёсткая ширина 1200px и кликабельный <div> — на телефоне появляется горизонтальный скролл, по элементу нельзя перейти с клавиатуры.

width: 1200px — не помещается, появляется скролл →
📄 bad-project.html
<div class="page">
  <div onclick="send()">Contact</div>
</div>
.page { width: 1200px; }

Современно: семантический <main> и настоящая <button> (доступна с клавиатуры), а контейнер min(100% - 2rem, 72rem) сам ужимается под экран.

width: min(100% - 2rem, 72rem) — всегда влезает
📄 good-project.html
<main class="page">
  <button type="button" class="button">Contact</button>
</main>
.page { width: min(100% - 2rem, 72rem); margin-inline: auto; }
Вывод: финальный проект оценивается не «как выглядит на одном экране», а как ведёт себя на всех ширинах и с клавиатуры. Семантика + гибкий контейнер закрывают обе проблемы сразу.

Навигация