Неделя 3 · Shelter Part 2 — Responsive (320–1280px)

🧭 ← P1 · Следующая → P3

🎯 Что строим

Берёшь Main и Pets из P1 и делаешь полностью адаптивными от 320px до 1280px. Дизайн в Figma уже есть на трёх ширинах: 1280 / 768 / 320 (artboards main-* и our-pets-*).

Бургер-меню в этой части НЕ открывается — только заменяет навигацию иконкой при <768px. Сам menu появится в P3.

📄 Полное задание Part 2 →

🏷 Required Skills

responsive design · media queries · mobile-first · fluid layout · relative units · breakpoints · CSS Flexbox · CSS Grid

🚫 Запреты

  • 🔴 Layout как screenshot — -100
  • 🔴 Запрещённые фреймворки — -100
  • 🟡 Горизонтальный скролл на любой ширине от 320 до 1280 — -20 (главное правило)

⛰ Что унаследовано из P1 (compound)

Из Shelter P1 ты уже умеешь:

  • Семантический HTML + W3C-валидацию
  • Figma → код (но только 1280-артборды)
  • Pixel-perfect через PerfectPixel
  • BEM
  • Flexbox + Grid layout
  • Логотип + h1 + favicon + scroll-behavior

Эта задача добавляет → media queries для трёх breakpoint'ов, mobile-first архитектуру CSS, fluid layout между breakpoint'ами, бургер-иконку (без логики).

📚 Что изучить (по порядку)

1 · Mobile-first философия

Зачем: правильный mobile-first CSS строится min-width → расширяется. Anti-pattern — писать desktop и потом «забивать» mobile через max-width. Понимание подхода = меньше CSS-кода.

Идея: базовый CSS — для самого узкого экрана (320px). Дальше через @media (min-width: 768px) { … } ДОБАВЛЯЕШЬ изменения для tablet и desktop.

Self-check: почему min-width лучше max-width в mobile-first подходе?

2 · Media queries + breakpoints

Зачем: три фиксированных точки: 1280px (desktop), 768px (tablet), 320px (mobile). Сабмит проверяется на них.

Шаблон mobile-first:

/* Базовые стили — для 320px */
.card { width: 100%; }

/* Для tablet (≥768px) — расширяем */
@media (min-width: 768px) {
  .card { width: 50%; }
}

/* Для desktop (≥1280px) — расширяем */
@media (min-width: 1280px) {
  .card { width: 33.33%; }
}

Self-check: в каком порядке писать media queries — от mobile к desktop или наоборот? Что произойдёт если перепутать?

3 · Viewport meta tag

Зачем: без правильного <meta name="viewport"> mobile-браузер отрендерит сайт как desktop в 980px и зашрумкает. Адаптивность не сработает вообще.

Обязательно в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Self-check: что произойдёт на iPhone если убрать viewport meta? Что значит width=device-width?

4 · Относительные единицы и fluid layout

Зачем: между breakpoint'ами (например, 800–1100px) контент должен плавно «течь», а не быть «лестницей» из ступенек.

Современный паттерн — fluid typography:

font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);
/* минимум 1rem, идеально 2vw + 0.5rem, максимум 1.5rem */

Self-check: чем clamp отличается от media queries для font-size? Когда лучше что?

5 · No horizontal scroll (главный pitfall)

Зачем: +20 баллов и репутация. Главная причина пропадания баллов в P2.

Источники горизонтального скролла:

  • Элементы с min-width больше viewport (например, min-width: 350px на экране 320px)
  • width: 100vw + есть scrollbar по вертикали → 100vw > 100% body
  • Не задан overflow-x: hidden на body (иногда нужно, но симптом проблемы, а не лечение)
  • Картинки/SVG без max-width: 100%; height: auto
  • padding/margin в px на узких контейнерах
  • Длинные слова без word-break/overflow-wrap

Проверка: в Chrome DevTools переключай Responsive mode, тяни от 320 до 1280, смотри на горизонтальный scrollbar.

Self-check: почему width: 100vw опасно? Чем width: 100% безопаснее?

6 · Адаптивные изображения и медиа

Минимум:

img { max-width: 100%; height: auto; display: block; }

7 · Бургер-иконка (без open-логики)

Зачем: +5 за появление иконки вместо <nav> на <768px. Сам menu — в P3.

Реализация без JS:

  • На широких экранах показываем <nav> (или его меню-список)
  • На узких — скрываем его через display: none, показываем бургер-иконку
  • Иконка обычно делается через 3 <span> или 1 SVG/inline-SVG
.burger { display: none; }
.nav-menu { display: flex; }

@media (max-width: 767px) {
  .burger { display: block; }
  .nav-menu { display: none; }
}

(Логика клика на бургер появится в P3 через JS.)

8 · Adaptive layout patterns

Зачем: надо знать паттерны как карточки/блоки переразлагаются на 3 ширинах.

Современный Grid-паттерн (без media queries для карточек):

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

Автоматически 1/2/3/4 колонки в зависимости от ширины.

9 · Workflow (отличие от P1)

  • Создаёшь ветку shelter-part2 ИЗ shelter
  • Работаешь, мержишь PR shelter-part2 → shelter
  • Деплой gh-pages обновляется
  • Открываешь PR shelter → main (если ещё не открыт) — не мержим

См. Repo Workflow для bootcamp.

✅ Чек-лист критериев (110 баллов)

Main страница · 45

  • Layout совпадает с дизайном на 1280px (+15)
  • Layout совпадает с дизайном на 768px (+15)
  • Layout совпадает с дизайном на 320px (+15)

Pets страница · 15

  • Layout на 1280px (+5)
  • Layout на 768px (+5)
  • Layout на 320px (+5)

Responsive behavior · 50

  • Нет горизонтального скролла на обоих страницах при любой ширине 320–1280 (+20)
  • Layout адаптируется плавно между breakpoint'ами (нет overlap/cut-off/jump) (+15)
  • Бургер-иконка появляется вместо <nav> при <768px на обеих страницах (+5)
  • Markup валиден на обеих страницах по W3C (+10)

🧠 Self-check перед коммитом

  1. Открыл DevTools Responsive, тянул от 320 до 1280 — есть ли где-то горизонтальный scrollbar? (Если да — лечи)
  2. PerfectPixel совпадение на трёх ширинах: 320 / 768 / 1280?
  3. Viewport meta присутствует?
  4. На 767px видна бургер-иконка, на 768px — <nav>?
  5. W3C валидация снова прошла после ресайза?
  6. На реальном телефоне (или эмуляторе) выглядит ок?

➡ Что переходит дальше

В P3:

  • Бургер начнёт открывать меню (JS)
  • Same media queries — основа для popup и слайдера

В будущем — все UI-задачи bootcamp (Podcast/NFC/Async Race) требуют responsive ≤500px.

📚 Внешние ресурсы