Insegna te stesso CSS Flexbox con il gioco Flexbox Froggy
In passato abbiamo sorvolato il flexbox e le basi su come funziona. Ma in realtà applicare flexbox al tuo flusso di lavoro può essere difficile perché è una aggiunta così complicata alle specifiche CSS.
Con Flexbox Froggy puoi farlo impara tutte le basi della flexbox con un divertente webgame che coinvolge rane e lilypads. So che sembra pazzesco ma questa è davvero una fantastica webapp.
Si inizia al livello 1 e pianifica la tua strada attraverso 24 diversi livelli insegnare i molti aspetti dell'orientamento della flexbox. I primi livelli iniziano facilmente chiedendoti di farlo allineare una o due rane lungo un singolo contenitore. Le prime lezioni includono anche suggerimenti e suggerimenti per aiutarti lungo la strada.
Ma una volta superata la lezione 10, le cose si surriscaldano davvero. Avrai bisogno di imparare come fare-organizzare gli oggetti all'interno di un contenitore, come organizzare soddisfare verticalmente, e come creare spaziatura equidistante tra diverse file di contenuti diversi.
Le simpatiche ranocchette potrebbero attirarti, ma ti assicuro che si tratta di un gioco difficile.
però, dai novizi completi agli sviluppatori web più esperti, il gioco è fatto per tutti i livelli. Le prime lezioni sono un gioco da ragazzi e le lezioni successive possono lasciarti curvo sullo schermo con ciuffi di capelli al tuo fianco.
Il codice sorgente completo del gioco è disponibile gratuitamente su GitHub in modo che tu possa scaricarlo e riprodurlo localmente, se lo desideri.
Inoltre la webapp è multilingue offrendo 20 lingue tra cui inglese, francese, tedesco, italiano, cinese, giapponese e russo (oltre a molti altri).
Lo ammetterò riorganizzare le rane non ti renderà immediatamente padrone di flexbox. Ma queste lezioni sono pensate per familiarizzare con la sintassi flexbox così puoi sentirti più a tuo agio a lavorare in scenari del mondo reale.
Se sei un sviluppatore web di qualsiasi livello di abilità dovresti assolutamente dare un'occhiata a Flexbox Froggy. È completamente gratuito, abbastanza divertente da giocare e sorprendentemente educativo.
