Неделя 2 · Shelter Part 1 — Fixed Layout (1280px)

🧭 ← Обзор Shelter · Предыдущая ← Slider · Следующая → P2

🎯 Что строим

Две страницы (Main и Pets) по Figma-дизайну. Ширина контента фиксированная 1280px — НЕ меняется при ресайзе окна (адаптив будет в P2). Только artboards main-1280 и our-pets-1280.

Сабмит — деплой + PR + cross-check.

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

🏷 Required Skills (как заявлено)

semantic HTML · CSS Flexbox · CSS Grid · pixel-perfect markup · HTML validation · Figma · BEM

🚫 Запреты + штрафы

  • 🔴 Layout как картинка/screenshot — -100
  • 🔴 Запрещённые фреймворки/библиотеки — -100
  • 🟡 position: absolute/relative/fixed — задача напрямую не запрещает, но злоупотреблять не стоит

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

Из Slider ты уже умеешь:

  • Блочная модель и нормальный поток
  • CSS селекторы и комбинаторы
  • Flexbox и Grid основы
  • Относительные единицы
  • Псевдоклассы (:hover, :active)
  • Git workflow (commit convention, gh-pages, PR)

Эта задача добавляет → семантику HTML, валидацию W3C, работу с Figma, BEM, pixel-perfect-вёрстку.

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

1 · Семантический HTML (главное новшество)

Зачем: валидатор +10 баллов, SEO, screen reader-ы. Без семантики -5 штраф.

Self-check: для чего <section> vs <div> vs <article>? Что подсветит screen reader при правильной семантике?

2 · Структура документа и <head>

Зачем: валидация требует корректный DOCTYPE, метатеги, charset, favicon (+5).

Self-check: что произойдёт без <meta charset="UTF-8">? Зачем viewport meta tag нужен даже на fixed-layout?

3 · Figma — превращение дизайна в код

Зачем: без правильной работы с Figma нельзя посчитать размеры/шрифты/цвета → не будет pixel-perfect.

Не из vault'а — это инструмент:

Установи:

  • PerfectPixel Chrome extension — наложение Figma-скриншота на твой деплой для попиксельной сверки

Self-check: ты экспортировал ассеты (картинки, иконки, шрифты) из Figma? Шрифты с Google Fonts подключил в <head>?

4 · Layout страниц — Flexbox + Grid

Зачем: задача явно требует Help блок через grid-layout (+5). Остальные блоки тоже через Flexbox/Grid.

Унаследовано из Slider:

Новые паттерны под Shelter:

Self-check: какая раскладка проще для блока Help где 9 одинаковых пунктов сеткой 3×3 — Flexbox с flex-wrap или Grid с repeat(3, 1fr)?

5 · Pixel-perfect, BEM, фоны

Зачем: +35 баллов за совпадение с дизайном, +5 за фон на всю ширину.

Pixel-perfect:

  • Допуск 10px вертикально/горизонтально
  • PerfectPixel extension, scale = 1, браузер на 100% zoom
  • При ширине окна > 1280px — центруй дизайн, фон тянется на всю ширину

BEM (наименование классов):

  • BEM
  • Шаблон: block__element--modifier
  • Зачем: предсказуемые селекторы без вложенности → стили легко поддерживать
  • BEM Naming Convention (en)

Фоны:

  • Фоны · Цвета в CSS · Градиенты
  • Контейнер контента — фиксированная 1280px ширина по центру (через max-width + margin: 0 auto)
  • Фоновый цвет/градиент — на родителе (тянется на всю ширину body)

Self-check: как сделать чтобы фон тянулся на всю ширину окна, а контент был ограничен 1280px по центру?

6 · Интерактивность (hover/active, scroll-behavior)

Зачем: +10 баллов за корректные интерактивные состояния и плавный anchor scroll.

Особенности задачи:

  • Логотип = текст (НЕ картинка)
  • Активный пункт меню (About the Shelter/Our pets) — выделен и не интерактивен
  • Hover/active не должен затрагивать соседние элементы (не jumping layout)

Self-check: что произойдёт если ставить transition: all вместо transition: background-color, color? Чем плох "all"?

7 · Навигация и якоря (карта переходов)

Согласно требованию задачи:

Main → Pets через:

  • Our Pets в навигации
  • Get to know the rest в блоке Our Friends

Внутри Main (якоря):

  • Help the shelter → блок Help
  • Make a Friend → блок Our Friends
  • Contacts → <footer>

Пустые ссылки (href="#"):

  • Logo, номер банковской карты

Особые ссылки в footer:

  • Email → mailto:
  • Phone → tel:
  • Location → https://maps.google.com/?q=... с target="_blank"

8 · Self-evaluation в console (требование задачи)

К *.html подключи index.js с console.log где перечисли пункты scoring которые ты выполнил.

Это нужно для cross-check — ревьюер открывает DevTools → Console и видит твою самооценку.

Формат — на твой выбор, например:

+10 Markup validation
+5 Header logo as text + h1 + favicon
+5 Header block matches design
... и т.д.
Total self-score: 95/110

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

  • Ветка shelter от main
  • В ветке — папка shelter/ с проектом
  • Деплой через merge PR shelter → gh-pages (не как в Slider)
  • PR shelter → main (открытый, не мержим)

См. Repo Workflow для bootcamp.

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

Main страница · 70

Markup validation +10:

  • Валидация W3C прошла без errors (+5; с warnings — +2.5)
  • Logo текстом + ровно один <h1> + favicon (+5)

Layout matches design +35:

  • <header> (+5)
  • Not only (+5)
  • About (+5)
  • Our Friends (+5)
  • Help (+5)
  • In addition (+5)
  • <footer> (+5)

CSS requirements +15:

  • Help через grid-layout (Flexbox или Grid) (+5)
  • При окне >1280px layout остаётся по центру (+5)
  • Фоновый цвет растягивается на всю ширину (+5)

Interactivity +10:

  • About the Shelter подсвечен и не интерактивен; остальные — интерактивны; плавный anchor scroll; все ссылки работают (+5)
  • Pet-карточки интерактивны при наведении на любую часть; hover/active с цветом/фоном, плавно, без layout jump (+5)

Pets страница · 40

Markup validation +10: аналогично Main Layout matches design +15: <header> + Our Friends + <footer> (по +5) CSS requirements +5: layout по центру + фон растягивается Interactivity +10: аналогично Main

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

  1. Прошла ли W3C-валидация без ошибок? (<https://validator.w3.org/> → Validate by URL)
  2. PerfectPixel показывает совпадение в пределах 10px?
  3. Один <h1> на каждой странице?
  4. На ширине окна 1500px layout по центру с равными отступами?
  5. Anchor links плавно скроллят?
  6. console.log self-evaluation выводится?

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

В Shelter P2:

  • Этот же HTML/CSS — основа, но добавишь media queries

В Shelter P3:

  • Pet-карточки станут кликабельными (popup), бургер начнёт открываться, Our Friends карусель/пагинация на JS

В будущем (любая UI-задача):

  • Семантика, BEM, Figma → workflow всех вёрсточных задач

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