Урок 22. Итоговый проект: дашборд
⚡ Кратко
Итоговый проект: дашборд из всего, что было в курсе. Каркас на Grid, сайдбар и шапка, карточки метрик, график, таблица заказов с меню действий, диалог создания, фильтры в боковой панели, тёмная тема и финальное ревью по чек-листу.
О чём этот урок
Это не новая тема, а сборка. Мы пройдём путь от пустого проекта до рабочего интерфейса, попутно вспоминая, из какого урока каждый приём. Урок устроен как последовательность шагов: каждый добавляет один законченный кусок дашборда.
В конце — чек-лист качества: адаптивность, доступность, тёмная тема, порядок классов. По нему стоит проверять любой интерфейс, а не только учебный.
Структура урока
Теория
Архитектура дашборда: каркас, слои, состояния данных.
Справочник
Команды, компоненты и файлы проекта.
Примеры
Шаги сборки: каркас → метрики → график → таблица.
Старый vs Новый
Тот же дашборд без Tailwind и без компонентов.
Задания
Доделать проект своими руками.
Решения
Готовые фрагменты и разбор.
Ошибки
Что чаще всего ломается в дашбордах.
Домашнее задание
Свой дашборд под свою предметную область.
Ресурсы
Куда идти дальше.
Практика
- Соберите каркас: сайдбар, шапка, прокручиваемая область контента.
- Добавьте четыре метрики, график и таблицу с меню действий.
- Пройдите чек-лист качества и исправьте всё найденное.