I CSS sono una faccenda complicata. Centinaia di proprietà, una dozzina di modi per centrare un blocco e justify-content con 12 valori che si combinano anche con safe e unsafe. I cheat sheet aiutano all'inizio, ma la vera comprensione arriva solo con la pratica. Possibilmente non in produzione alle tre del mattino.

Per fortuna, la community frontend ha trovato un modo migliore: i giochi. Sì, veri giochi da browser in cui controlli rane, difendi torri, salvi alieni e senza accorgertene impari flexbox, grid e selettori. Niente teoria fine a se stessa, solo codice che vedi in azione all'istante.

Ho raccolto 8 giochi CSS gratuiti che funzionano davvero nel 2026. Ognuno copre un argomento specifico, dai selettori di base alle trasformazioni 3D. In più, alla fine, un video con una guida completa del gioco più famoso, nel caso ti blocchi su un livello.

💡 Panoramica rapida:

• Inizia con Flexbox Froggy: il miglior punto di partenza per principianti, 24 livelli con feedback visivo immediato, copre tutte le proprietà chiave di flexbox.
• Passa a Grid Garden e impara CSS Grid giocando, 28 livelli dagli stessi autori di Codepip.
• Migliora i tuoi selettori con CSS Diner (32 livelli): dopo questo, nessun :nth-child() ti farà più paura.
• Affronta tecniche avanzate: Flexbox Defense per la modalità battaglia, Unfold per le trasformazioni 3D, Roadmap per leggere il codice sorgente.

Confronto rapido: quale gioco scegliere

Video: guida completa a Flexbox Froggy con spiegazione di ogni proprietà. Se sei bloccato su un livello, controlla il timestamp nella descrizione.

1. Flexbox Froggy

Questo è probabilmente il gioco CSS più famoso al mondo. Creato dallo studio Codepip, ti guida attraverso 24 livelli, dal semplice justify-content: flex-end a combinazioni complesse come flex-direction, align-items, align-content, flex-wrap, flex-flow and order. La meccanica è semplice: scrivi una proprietà CSS, la rana salta sulla ninfea giusta.

L'ultimo livello, il 24, è leggendario. Richiede flex-direction: column-reverse insieme a flex-wrap: wrap-reverse e align-content: space-between. Se lo superi al primo tentativo, hai padroneggiato flexbox alla perfezione.

🔗 Flexbox Froggy | 🔗 Codice sorgente su GitHub

2. Flexbox Defense

Tower Defense in cui al posto delle torrette ci sono le proprietà CSS. Le tue torri sono disposte su una griglia e per puntarle verso i nemici scrivi justify-content e align-items. 12 livelli coprono align-items, justify-content, flex-direction, align-self and order.

Gli ultimi 4 livelli sono una sfida seria anche per chi ha già completato Flexbox Froggy. Nessun suggerimento: solo tu, il browser e ondate di nemici. L'autore, Channing Allen, ha pubblicato il gioco su GitHub completamente open.

🔗 Flexbox Defense | 🔗 Codice sorgente

3. Grid Garden

Dagli autori di Flexbox Froggy, stessa idea ma per CSS Grid. Innaffi aiuole di carote scrivendo grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area and order. 28 livelli, 4 in più di Froggy.

Il gioco va più a fondo del semplice grid-template-columns: 1fr 1fr. Ai livelli 25+ lavori con grid-area usando aree con nome, una tecnica che nei progetti reali sostituisce la maggior parte degli hack flexbox per le griglie.

🔗 Grid Garden | 🔗 Codice sorgente

4. CSS Diner

32 livelli sui selettori CSS, dal semplice plate fino a plate:only-child e apple:not(.small). «Ordini» gli elementi dal tavolo scrivendo un selettore nell'editor a destra. L'evidenziazione in tempo reale mostra esattamente cosa hai selezionato.

La parte più utile qui sono i livelli con le pseudo-classi. Dopo CSS Diner, costruzioni come :nth-child(2n+3), :last-of-type, :only-of-type non ti fanno più venire voglia di aprire MDN. E il livello 32 (plate pickles + apple:not(.small)) è un finale degno per chi vuole definirsi esperto di selettori.

🔗 CSS Diner | 🔗 Codice sorgente

5. Unfold

Tecnicamente questo non è un gioco ma una presentazione interattiva delle trasformazioni CSS 3D di Chris Ruppel. Scorri la pagina e questa si dispiega nello spazio tridimensionale. rotateX, rotateY, translateZ, perspective: tutto ciò che nella documentazione sembra complicato qui viene mostrato visivamente.

Non serve scrivere una sola riga di codice. Basta scorrere, guardare un rettangolo piatto trasformarsi in un cubo e leggere i commenti dell'autore. Dopo questa esperienza, le trasformazioni 3D smettono di sembrare magia nera.

🔗 Unfold | 🔗 Codice sorgente

6. Roadmap

Un piccolo arcade di Victor Darras: un'auto si muove lungo la strada e tu la controlli con il mouse. L'intero gioco è scritto in puro CSS e HTML, senza una sola riga di JavaScript. Questo significa che puoi aprire i DevTools e vedere esattamente come funzionano le animazioni clip-path, transform e @keyframes.

Il gioco in sé non insegna CSS direttamente. Ma studiare il codice sorgente è un mini-corso sulle tecniche avanzate. A me ci sono voluti 8 tentativi per vincere.

🔗 Roadmap su CodePen

7. Carnival

Un poligono di tiro realizzato in puro CSS da Una Kravets del team di Google Chrome. Hai 8 secondi per colpire tutti i bersagli. Tutta la logica è basata su checkbox e animazioni CSS: i bersagli si muovono, compaiono e scompaiono senza una sola riga di script.

Il link a CodePen qui sotto porta al codice sorgente completo, puoi farne un fork, modificare i tempi nei @keyframes e creare la tua versione. Un ottimo esercizio per capire fino a che punto ci si può spingere con il solo CSS.

🔗 Carnival su CodePen

8. Tris

Un classico in una veste inaspettata: il tris senza JavaScript. Alvaro Montoro ha implementato la logica del gioco usando esclusivamente checkbox, la pseudo-classe :checked e animazioni CSS. Due livelli di difficoltà, nel secondo il computer «ragiona» un po' meglio (per quanto possibile senza script).

Vantaggio pratico: esaminando il codice sorgente, capirete come funzionano i selettori adiacenti (+), :checked e come costruire logiche complesse con i soli stili. Per progetti personali e demo, una tecnica preziosa.

🔗 Tris su CodePen

⁉️🤔 Domande frequenti

Questi giochi aiutano un principiante assoluto che non conosce per niente i CSS?

Sì, sono stati creati esattamente per questo. Inizia con Flexbox Froggy, il gioco ti porterà da justify-content: flex-start a combinazioni complesse senza alcuna conoscenza pregressa. Tieni aperta in parallelo la documentazione MDN su Flexbox per avere un contesto. In 2-3 sere coprirai completamente l'argomento flexbox.

Ha senso fare questi giochi per uno sviluppatore esperto?

Sì, ma in modo selettivo. Invece di Flexbox Froggy (sarà noioso ai primi 15 livelli) affronta subito Flexbox Defense, atmosfera di combattimento e vincoli più rigidi. Grid Garden è utile anche per chi scrive grid-template-columns ogni giorno: i livelli dal 25 in poi con grid-area mostrano tecniche che si trovano raramente nei tutorial. CSS Diner ai livelli 25-32 è il miglior test per la conoscenza delle pseudo-classi.

Perché i giochi invece di un video corso o della documentazione?

I giochi forniscono un feedback visivo immediato, hai scritto align-items: center e hai subito visto la rana saltare al centro. Questa è la differenza fondamentale rispetto alla visione passiva di un video: la memoria muscolare si forma perché stai scrivendo codice tu stesso. In più c'è l'elemento sfida: il desiderio di superare il livello successivo ti mantiene coinvolto meglio di qualsiasi scadenza.

Questi giochi sono allineati alle specifiche CSS moderne (2026)?

Sì. Flexbox e Grid sono specifiche mature, le loro proprietà di base non cambiano da anni. Nuove funzionalità come align-content nel flusso normale (2024) o le condizioni if() (2025) non sono coperte da questi giochi, ma si tratta di funzioni di nicchia non necessarie nel lavoro quotidiano. Per la stragrande maggioranza dei layout reali, ciò che insegnano questi giochi è sufficiente.

Cosa devo fare se un gioco non funziona nel mio browser?

Tutti gli 8 giochi sono stati testati su Chrome e Firefox, nessun problema riscontrato. Se un gioco non si carica: verifica che JavaScript non sia bloccato (Flexbox Defense e Roadmap richiedono script); prova ad aprire in modalità incognito (le estensioni a volte rompono il layout). Tic-Tac-Toe e Carnival su CodePen potrebbero richiedere un clic su "Run" per essere avviati.

Vale la pena giocare ai giochi CSS nel 2026?

Questi 8 giochi non sono solo intrattenimento per una sera. Ciascuno colma una lacuna specifica: Flexbox Froggy più Flexbox Defense offrono una copertura completa di flexbox da angolazioni diverse, Grid Garden è l'ingresso più indolore nel CSS Grid, CSS Diner insegna i selettori senza memorizzazione, e Roadmap, Carnival e Tic-Tac-Toe mostrano quanto si possa andare in profondità con il solo CSS.

Se sei un principiante, inizia con Froggy, poi Grid Garden, poi Diner. Tre sere e padroneggerai la maggior parte di ciò che ti serve realmente nel lavoro. Se sei esperto, salta i primi 15 livelli di Froggy, ma completa sicuramente CSS Diner fino alla fine ed esamina il codice sorgente di Carnival. Entrambe le cose richiederanno meno di un'ora.

Tutti gli 8 giochi sono gratuiti, aperti (tranne Roadmap, il cui codice sorgente è leggibile direttamente nei DevTools) e funzionano nel 2026 senza modifiche. Nessuna registrazione, nessun piano a pagamento. Apri il primo gioco e scrivi CSS.