Недели 2–4 · Shelter (обзор)

🧭 ← Roadmap · Предыдущая ← Slider · Следующая →

🎯 Проект целиком

Shelter — двухстраничный сайт приюта для животных по Figma-дизайну. Делается в 3 недели по частям. Каждая часть — отдельный сабмит и отдельный cross-check.

# Часть Неделя Стек Карточка
P1 Fixed Layout (1280px) 2 HTML + CSS, semantic, BEM, Figma 02a — Shelter Part 1 — Fixed Layout
P2 Responsive (320–1280px) 3 + media queries, mobile-first 02b — Shelter Part 2 — Responsive
P3 JavaScript Functionality 4 + vanilla JS, DOM, fetch, JSON 02c — Shelter Part 3 — JavaScript

🚫 Запреты (общие на весь проект)

❌ Что нельзя
🔴 CSS-фреймворки (Bootstrap, etc) — -100
🔴 JS-фреймворки (React, Vue, Angular) — -120 в P3
🔴 jQuery и другие JS-библиотеки
🔴 TypeScript в P3 — -120 (только vanilla JS)
🔴 Hardcoded pets data в HTML/JS в P3 — -30 (только из pets.json)
🔴 Layout как screenshot картинки — -100 (надо реальная вёрстка)
🟡 reset.css не рекомендуется (normalize.css ок)
✅ Sass/SCSS разрешён

🗂 Git-стратегия (важно — 3 ветки идут друг за другом)

main                    ← не трогаем
└── shelter             ← P1 здесь, потом сюда мержим P2 и P3
    ├── shelter-part2   ← P2 (создаётся от shelter)
    └── shelter-part3   ← P3 (создаётся от shelter после merge P2)

Алгоритм:

  1. Неделя 2 — P1: ветка shelter. PR shelter → main (не мержим).
  2. Неделя 3 — P2: создаёшь shelter-part2 ИЗ shelter. Работаешь. PR shelter-part2 → shelter — мержишь.
  3. Неделя 4 — P3: создаёшь shelter-part3 ИЗ shelter (там уже P2). Работаешь. PR shelter-part3 → shelter — мержишь.
  4. Никогда не мержим в main.

Подробности: Repo Workflow для bootcamp.

🧰 Инструменты для cross-check

  • PerfectPixel — Chrome extension для попиксельной сверки с Figma (в P1 и P2). Установить
  • W3C Validator — https://validator.w3.org/ (валидация HTML в P1 и P2)
  • Chrome DevTools Device Toolbar — Responsive mode (320 / 768 / 1280) для P2

⛰ Compound — что наслаивается

Slider:    CSS layout + animations + responsive + псевдоклассы
   │
   ▼
P1:        + Семантика HTML + W3C-валидация + Figma + BEM + pixel-perfect
   │
   ▼
P2:        + Media queries 1280/768/320 + mobile-first + viewport meta + no horizontal scroll
   │
   ▼
P3:        + vanilla JS + DOM + события + fetch JSON + modal + scroll-lock + бесконечный карусель + пагинация

К концу недели 4 ты:

  • Умеешь верстать по дизайну попиксельно
  • Делаешь полностью адаптивный сайт
  • Пишешь vanilla JS для DOM-интерактива без фреймворков

📚 Внешние ресурсы (на весь проект)

➡ Дальше

Переходи к 02a — Shelter Part 1 — Fixed Layout.