Практика модуля

КРОК 1Розмітка

Зверстай один екран: шапка з навігацією, бічна панель із фільтрами, робоча область із трьома панелями (зведення, список, деталі), підвал. Тільки семантичні теги, максимум два рівні обгорток, один h1.

КРОК 2Каркас на Grid

Розклади шапку, сайдбар, контент і підвал через grid-template-areas. Висота — на весь екран (100dvh), скрол — усередині робочої області, а не в усієї сторінки.

КРОК 3Вміст на Flex

Усередині шапки й панелей використай flex: логотип ліворуч, дії праворуч, рядок фільтрів із переносом. Сітку карток у зведенні зроби через repeat(auto-fit, minmax(…)) — без жодного медіазапиту.

КРОК 4Стилі за BEM + SCSS

Розклади стилі по файлах: токени, скидання, міксини, компоненти. Іменування — BEM, глибина селектора максимум два рівні, нуль !important, нуль стилів по id.

КРОК 5Тема

Зроби три стани теми: світла, темна, системна. Перемикач зберігає вибір у localStorage. Жоден компонент не повинен знати, яка тема активна — лише токени.

КРОК 6Контроли

Намалюй кнопку (два варіанти), поле вводу з підписом і помилкою, статус-бейдж у трьох станах. У кожного — усі п'ять станів, обов'язково :focus-visible.

КРОК 7Самоперевірка

Пройди екран лише клавішею Tab: фокус має бути видно завжди й ніде не губитись. Потім відкрий DevTools і порахуй рівні вкладеності — якщо десь більше чотирьох, спробуй прибрати обгортку.