Tanítsd meg magadnak a CSS Flexboxot a Flexbox Froggy játékkal

A múltban a flexbox fölött csillogtunk, és a működés alapjait. Azonban a flexbox alkalmazása a munkafolyamatra kihívást jelenthet, mert ez a CSS specifikációjának ilyen bonyolult kiegészítése.

A Flexbox Froggy segítségével lehet megtanulják a flexbox összes alapjait egy szórakoztató játékkal, amely békákat és lilypadokat tartalmaz. Tudom, hogy őrültnek hangzik, de ez komolyan nagyszerű webapp.

Az 1. és a lassan dolgozzon 24 különböző szinten a flexbox tájolásának számos aspektusának tanítása. A korai szintek megkönnyítik a megkérdezését egy vagy két békát egy tartály mentén igazítson. A korai leckék tartalmazhatnak tippeket és javaslatokat is, amelyek segítenek az út során.

De ha egyszer elmúlt 10 lecke, a dolgok valóban felmelegednek. Meg kell tanulnia, hogyan kell újra-a tartályban lévő elemek rendezése, hogyan kell szervez tartalom függőlegesen, és hogyan kell létrehozni egyenlő távolságban különböző tartalmú sorok között.

Az aranyos kis békák csalódhatnak benneteket, de nyugodtan győződj meg róla, hogy ez egy kemény játék.

azonban, a teljes kezdőktől a tapasztaltabb webfejlesztőkig, a játék minden szinten készült. A korai tanulságok a szél, és a későbbi leckék elhagyva a képernyőn a hajcsomókkal..

A teljes játék forráskódja ingyenesen elérhető a GitHub-on, így letöltheti és lejátszhatja helyben, ha akarja.

A weblap többnyelvű 20 nyelvet kínál angol, francia, német, olasz, kínai, japán és orosz (plusz sok más).

Ezt bevallom a békák átrendezése nem fog azonnal mesternek lenni flexbox. De ezeknek a tanulságoknak a célja ismerkedjen meg a flexbox szintaxisával így jobban érezheti magát a valós forgatókönyvekben.

Ha a bármilyen készségszintű webfejlesztő határozottan nézd meg a Flexbox Froggy-t. Teljesen ingyenes, nagyon szórakoztató játék és meglepően oktató.