Učte se CSS Flexbox s Flexbox Froggy Game

V minulosti jsme přehlíželi flexbox a základy fungování. Ale použití flexboxu do vašeho pracovního postupu může být náročné, protože je to tak komplikovaný doplněk ke CSS spec.

S Flexbox Froggy můžete naučit se všechny základy flexbox s zábavnou webgame zahrnující žáby a lilypads. Vím, že to zní šíleně, ale tohle je vážně skvělý webapp.

Začnete na úrovni 1 a pomalu si cestu přes 24 různých úrovní výuka mnoha aspektů orientace na flexbox. Počáteční úrovně začínají snadno a žádají vás vyrovnat jednu nebo dvě žáby podél jednoho kontejneru. Včasné lekce také obsahují tipy a návrhy, které vám pomohou na cestě.

Ale jakmile se dostanete za hodinu, 10 věcí se opravdu zahřeje. Budete se muset naučit, jak znovu-organizovat předměty uvnitř kontejneru, jak organizovat obsah svisle, a jak vytvořit ekvidistantní vzdálenost mezi různými řadami různého obsahu.

Roztomilé malé žáby vás mohou nalákat, ale ujistěte se, že je to tvrdá hra.

nicméně, od úplných nováčků až po zkušenější webové vývojáře, hra je určena pro všechny úrovně. Časné lekce jsou hračkou a pozdější lekce vás mohou nechat shrbený po obrazovce s chuchvalci vlasů po vaší straně.

Kompletní zdrojový kód hry je k dispozici zdarma na GitHubu, takže si ho můžete stáhnout a přehrát lokálně, pokud si budete přát.

Navíc je webapp vícejazyčný nabízí 20 jazyků včetně angličtiny, francouzštiny, němčiny, italštiny, čínštiny, japonštiny a ruštiny (plus mnoho dalších).

To přiznám přeuspořádání žab vás neprodá okamžitě flexboxu. Tyto lekce však mají být seznámíte se se syntaxí flexboxu takže se můžete cítit pohodlněji v reálných situacích.

Pokud jste webový vývojář jakékoliv úrovně dovedností měli byste určitě vyzkoušet Flexbox Froggy. Je to zcela zdarma, docela zábavné hrát a překvapivě vzdělávací.