Progetto finale: dashboard responsive
Un’interfaccia completa combina colori, spaziature, card, griglie e stati coerenti.
1. Il concetto, spiegato da zero
Un’interfaccia completa combina colori, spaziature, card, griglie e stati coerenti.
Progetta un pannello a card con layout che passa da tre colonne a una. Verifica il comportamento su schermi differenti e il contrasto dei testi.
2. Un esempio ragionato
Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: #152840; color: white; padding: 18px; border-radius: 12px; }
@media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; } }Come leggere questo esempio
- Prima di eseguire, immagina come apparirà il risultato nel browser.
- Spiega con parole tue in che modo “progetto finale: dashboard responsive” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Non iniziare dal dettaglio di un’ombra: costruisci prima struttura, gerarchia e layout responsive.
3. Adesso tocca a te
Obiettivo dell’esercizio: Stilizza tre card in una dashboard che diventa a colonna singola su mobile.
Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.
Laboratorio: metti alla prova il codice
CSS · cssL’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.
Output / esito del controllo
Il risultato comparirà qui.
Mostra la soluzione di riferimento
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: #152840; color: white; padding: 18px; border-radius: 12px; }
@media (max-width: 700px) { .dashboard { grid-template-columns: 1fr; } }Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.
4. Verifica e ripasso
Quiz: hai capito il concetto?
Quale delle seguenti affermazioni è corretta per questo capitolo?
Progetta un pannello a card con layout che passa da tre colonne a una. Verifica il comportamento su schermi differenti e il contrasto dei testi.
Progetto finale completo: Dashboard dei progressi responsive
Un’app educativa deve mostrare le attività di uno studente su desktop e su telefono.
Le quattro tappe del progetto
- Definisci variabili CSS per colori, spazi e raggi.
- Usa Grid per le card e Flexbox per la barra di navigazione.
- Progetta breakpoints per telefono e tablet senza overflow orizzontale.
- Verifica contrasto, focus-visible e preferenze di movimento ridotto.
Che cosa consegnare
Un foglio style.css riutilizzabile, con layout desktop/mobile e guida alle scelte di design.
Come valutarti
Il progetto è riuscito quando tutte le funzionalità descritte funzionano con dati normali e casi limite. Rileggi i messaggi di errore, documenta come avviare il codice e conserva una copia di lavoro nel tuo IDE. Puoi aggiungerlo al tuo portfolio personale.
5. Come proseguire
Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.