⚡ Кратко
Справочная карта проекта: какой инструмент за какой блок отвечает и чем его проверить — от семантики до Lighthouse.
Чеклист технологий проекта
| Блок | Что использовать | Как проверить |
|---|
| HTML | semantic HTML, nav, main, section, формы | W3C Markup Validator |
| Layout | Grid для страницы, Flexbox для компонентов | DevTools overlays |
| Responsive | media queries, clamp(), srcset, sizes | 320/768/1024/1440px |
| Quality | accessibility, validation, Lighthouse | Keyboard + Lighthouse |
Ключевые конструкции урока
| Конструкция | Назначение |
|---|
width: min(100% - 2rem, 72rem) | Гибкий контейнер с полями, не шире максимума. |
repeat(auto-fit, minmax(180px, 1fr)) | Сетка карточек без ручных медиазапросов. |
font-size: clamp(1.5rem, 4vw, 3rem) | Fluid-типографика: размер тянется с экраном. |
@media (min-width: 64rem) | Mobile-first: колонки добавляются на широком экране. |
:focus-visible | Видимый фокус для навигации с клавиатуры. |
prefers-reduced-motion | Уважение к настройке «меньше анимации». |
Связанные уроки
- 33, 34 — медиазапросы и mobile-first.
- 26–30 — CSS Grid.
- 22–25 — Flexbox.
- 37 — fluid-типографика,
clamp().
- 38 — темы и
prefers-color-scheme.
- 45 — БЭМ-именование.
- 46 — типичные ошибки.
- 48 — валидация.
- 49 — оптимизация и производительность.