Перейти к содержимому

Собери готовый к развёртыванию дашборд

Средний~15 мин0/4 шаги

Собери готовый к развёртыванию дашборд

Это финальный проект. Ты уже создал KPI-карточки, график и макет отчёта — теперь пора собрать всё вместе в одну полноценную страницу дашборда, которую можно опубликовать по настоящему URL.

Ты соберёшь полную страницу: фирменный заголовок, ряд KPI-карточек, секцию с графиком и таблицу данных — всё на одном цельном экране. Это именно тот артефакт, который ты показываешь заказчику и говоришь: «Вот живой дашборд».

Думай от начала до конца. Готовое к развёртыванию приложение — это не просто красиво; оно организовано, читаемо и понятно без объяснений. Когда ты закончишь этот урок, у тебя будет приложение для работы с данными, достойное портфолио. Давай запустим его!

Инструкции

1

Добавь заголовок страницы с тегом h1 и названием приложения «Sales Analytics».

Подсказка: Используй: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Sales Analytics</h1></header>`.

Куда это писать?

<!-- Assemble your full dashboard here -->

Пишите в строке 11 — под тем комментарием, после уже добавленного кода.

2

Добавь ряд KPI с помощью адаптивного grid-контейнера.

3

Добавь секцию с графиком, используя стилизованные div-столбцы с цветом bg-purple-500.

4

Добавь таблицу данных с последними заказами, чтобы завершить дашборд.

Ваш код

html
13 строки
1
2
3
4
5
6
7
8
9
10
11
12
13

Живой просмотр

Живой просмотр