Vai al contenuto

Assembla la tua dashboard pronta al deploy

Intermedio~15 min0/4 passaggi

Assembla la tua dashboard pronta al deploy

Questo è il progetto finale. Hai costruito card KPI, un grafico e un layout di report — ora unirai i pezzi in un'unica pagina dashboard completa e pronta al deploy, che potresti pubblicare a un URL reale.

Assemblerai una pagina intera: un header con il brand, una riga di card KPI, una sezione grafico e una tabella dati — tutto in un'unica schermata coerente. Questo è l'artefatto che consegni a uno stakeholder dicendo "ecco la dashboard live".

Pensa dall'inizio alla fine. Un'app pronta al deploy non è solo bella: è organizzata, leggibile e si spiega da sola. Alla fine di questa lezione avrai un'app dati da portfolio. Pubblichiamola.

Istruzioni

1

Aggiungi un header di pagina con un titolo h1 dell'app "Analisi Vendite".

Suggerimento: Usa: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">Analisi Vendite</h1></header>`.

Dove va scritto?

<!-- Assembla qui la tua dashboard completa -->

Scrivilo alla riga 11: sotto quel commento, dopo il codice che hai già aggiunto.

2

Aggiungi una riga di KPI usando un contenitore a griglia responsive.

3

Aggiungi una sezione grafico usando div barra stilizzati con il colore bg-purple-500.

4

Aggiungi una tabella dati per gli ordini recenti per completare la dashboard.

Il tuo codice

html
13 righe
1
2
3
4
5
6
7
8
9
10
11
12
13

Anteprima dal vivo

Anteprima dal vivo