Inizia con Flexbox Froggy per esercitarti con l'allineamento lungo un asse, poi usa Grid Garden per esercitarti a posizionare un elemento tra le linee della griglia. Dopo ogni esercizio di gioco, riproduci l'idea in una piccola pagina web. Un risultato utile è essere in grado di spiegare perché una dichiarazione funziona quando il layout cambia, piuttosto che ricordare la risposta di un livello specifico.
Come imparare il CSS con i giochi e poi applicarlo
Questo percorso combina due giochi con tre esercizi originali. È adatto a chi sa leggere una semplice regola CSS e desidera un feedback visivo. Non è un corso completo di sviluppo web: le interfacce reali necessitano anche di contenuti leggibili, comportamento responsivo, accesso da tastiera e test con diverse quantità di testo.
Scegli l'esercizio giusto per la tua domanda
| La tua domanda | Inizia da qui | Poi prova |
|---|---|---|
| Come si spostano gli elementi lungo una riga? | Flexbox Froggy | Esercizio 1: spostare un gruppo alla fine |
| Perché l'allineamento è cambiato quando sono passato a una colonna? | Flexbox Froggy | Esercizio 2: cambiare l'asse principale |
| Come si posiziona un elemento su colonne specifiche? | Grid Garden | Esercizio 3: posizionare una carta tra le righe |
I giochi sono di Codepip. Cozcade collega ciascun gioco ospitato alla relativa guida: Flexbox Froggy e la sua guida; Grid Garden e la sua guida. Le pagine originali Froggy e Grid Garden forniscono le versioni degli autori. Utilizzare la tastiera per seguire gli esercizi di programmazione.
Innanzitutto, assegna un nome all'asse prima di scegliere una proprietà.
Flexbox ha un asse principale e un asse trasversale. flex-direction imposta la direzione principale; justify-content posiziona gli elementi lungo tale asse principale, mentre align-items riguarda l'asse trasversale. In una normale riga da sinistra a destra, l'asse principale è orizzontale. Cambiando la direzione in una colonna, diventa verticale. Queste definizioni sono trattate nell'introduzione a Flexbox di MDN.
Prima di provare a effettuare dichiarazioni in Froggy, specifica la direzione in cui desideri che gli elementi si muovano. Quindi, assegna un nome a tale direzione in relazione all'asse principale corrente. In questo modo, una risposta errata si trasforma in una domanda specifica: hai scelto la proprietà sbagliata, il valore sbagliato o l'asse sbagliato?
Esercizio 1: spostare un gruppo alla fine
Crea tre piccoli oggetti all'interno di un contenitore. Questo è un esercizio originale, non un livello di gioco copiato o una soluzione.
<div class="practice-row">
<span>A</span><span>B</span><span>C</span>
</div>.practice-row {
display: flex;
gap: 0.5rem;
min-height: 8rem;
padding: 1rem;
border: 2px solid;
direction: ltr;
}Il tuo obiettivo è spostare i tre oggetti insieme verso il bordo destro senza cambiarne l'ordine o assegnare a ciascun oggetto un margine separato. Prevedi il risultato, quindi aggiungi justify-content: flex-end al contenitore.
Ora confrontalo con justify-content: space-between. La prima opzione sposta il gruppo; la seconda distribuisce lo spazio disponibile tra gli oggetti. Prova con un contenitore stretto e uno largo. Spiega quale versione sceglieresti per tre pulsanti che devono rimanere vicini. Il risultato visibile è più importante che ricordare un singolo valore.
Esercizio 2: mantieni la stessa istruzione, cambia l'asse
Riutilizza quel contenitore, aggiungi flex-direction: column, imposta height: 12rem e mantieni justify-content: flex-end. Gli elementi ora si raggruppano verso il basso. La tua dichiarazione non è diventata un comando "sposta a destra": funziona ancora lungo l'asse principale, che hai modificato.
Successivamente, aggiungi align-items: flex-start. Confronta la disposizione prima e dopo questa aggiunta. Con la direzione specificata da sinistra a destra, gli elementi si allineano verso sinistra sull'asse trasversale. Rimuovi la dichiarazione e osserva di nuovo il comportamento di allungamento predefinito.
Scrivi una breve spiegazione di entrambe le modifiche senza usare "funziona e basta". Ad esempio, identifica l'asse, lo spazio libero e il gruppo che viene posizionato. Se non riesci a spiegare un risultato, riduci l'esempio a due elementi e modifica solo una dichiarazione alla volta. Questa è l'abitudine da riportare nel gioco.
Successivamente, distingui una traccia della griglia dal suo confine.
Il posizionamento sulla griglia utilizza linee che circondano righe e colonne. Cinque colonne esplicite hanno sei linee di confine. Un elemento posizionato dalla riga 3 alla riga 5 della colonna occupa due colonne, non tre. Vedi l'introduzione alla griglia di MDN per la distinzione tra tracce, celle e linee.
In Grid Garden, leggi i confini di inizio e fine prima di provare una posizione. Nella tua pagina, disegna o etichetta i confini se contare gli spazi ti crea confusione.
Esercizio 3: posizionare una carta tra due righe
Crea una griglia a cinque colonne e inserisci una carta:
<div class="practice-grid">
<div class="practice-card">Two-column card</div>
</div>.practice-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(3, 4rem);
gap: 0.5rem;
direction: ltr;
}
.practice-card {
grid-column: 3 / 5;
grid-row: 2;
background: #d9ceff;
color: #201538;
}Prevedi dove apparirà la carta prima di aprire la pagina. Quindi, fai in modo che occupi l'intera griglia modificando solo la sua posizione nella colonna. Con le cinque colonne esplicite di cui sopra, grid-column: 1 / 6 si estende dal primo limite all'ultimo.
Infine, modifica il testo in una frase molto più lunga e restringi il browser. La regola di posizionamento può rimanere corretta, mentre la presentazione ad altezza fissa della carta diventa inadatta al suo contenuto. Risolvere un esercizio di gioco insegna una parte del layout; costruire una pagina utilizzabile richiede anche di verificare il contenuto.
Usa i progressi del gioco come feedback, non come prova di padronanza.
Dopo un esercizio riuscito, modifica un'ipotesi: la direzione, il numero di elementi, la larghezza disponibile o la lunghezza del testo. Prevedi il risultato prima di guardare. Se riesci ad adattare l'idea e a spiegare la modifica, avrai imparato più di una semplice risposta di livello.
Quando torni a un gioco, verifica di aprire la stessa versione e lo stesso browser. I preferiti dell'account (Cozcade) identificano i giochi che desideri rivedere; non garantiscono il trasferimento dei progressi di apprendimento tra i dispositivi. Evita di eliminare i dati memorizzati sul sito mentre verifichi i tuoi progressi e utilizza la funzione di esportazione esplicita solo se il gioco in questione la prevede.
Continua con la guida di abbinamento.
Utilizza la Guida Froggy per esercitarti con assi e allineamenti e la Guida Grid Garden per le domande di posizionamento. Se desideri un altro tipo di esercitazione, consulta i giochi di apprendimento.
Gli esercizi sopra riportati sono stati scritti per questo articolo. Le pagine di riferimento sono state verificate l'11 ottobre 2026. Le nostre registrazioni di gioco coprono un numero limitato di interazioni su desktop, non il completamento di tutti i livelli o un corso completo su dispositivi mobili. Questo articolo illustra una sequenza di esercizi; non rilascia una qualifica né sostituisce la verifica delle proprie interfacce.
Giochi disponibili su Cozcade
Domande su dispositivi e progressi
Un account Cozcade salva i progressi di ogni gioco?
I preferiti dell'account ti aiutano a mantenere un elenco dei giochi. La scacchiera interna, il punteggio o i progressi delle lezioni di un gioco sono separati e dipendono dalle funzionalità di archiviazione del gioco stesso. Non dare per scontato che l'accesso trasferisca automaticamente un salvataggio tra browser o dispositivi. Controlla le istruzioni specifiche per il gioco e la versione in questione.
Cancellare i dati del browser può eliminare i miei progressi di gioco?
La rimozione dei dati memorizzati per il sito o il gioco può cancellare i progressi salvati localmente. Le impostazioni del browser distinguono i file memorizzati nella cache dai cookie e da altri dati di archiviazione del sito, sebbene un'opzione di pulizia possa rimuovere diversi tipi di dati contemporaneamente. Verifica cosa stai eliminando e, se disponibile, utilizza la funzione di esportazione documentata del gioco prima di rimuovere i dati.
Quali giochi funzionano sul mio dispositivo?
Consulta le opzioni del dispositivo nel catalogo dei giochi, quindi leggi i comandi sulla pagina del gioco selezionato. Alcune attività richiedono l'uso della tastiera o di un puntatore preciso. Il caricamento di una pagina su un telefono non garantisce di per sé che il gioco sia comodo da giocare con il touch screen.