Naučite se CSS Flexbox z igro Foxbox Froggy

V preteklosti smo se ukvarjali z flexboxom in osnovami, kako deluje. Toda dejanska uporaba flexboxa za vaš potek dela je lahko zahtevna, saj je tako zapleten dodatek k specifikaciji CSS.

Z Flexbox Froggy lahko naučite se vseh osnov flexbox-a z zabavno spletno igro z žabami in lilipadami. Vem, da zveni noro, vendar je to resnično super webapp.

Začnete na ravni 1 in počasi se prebijte skozi 24 različnih ravni poučevanje mnogih vidikov usmerjenosti v flexbox. Zgodnje stopnje se začnejo preprosto tako, da vas prosim poravnajte eno ali dve žabi vzdolž enega vsebnika. Zgodnje ure vključujejo tudi nasvete in predloge, ki vam bodo pomagali na poti.

Toda, ko se lektorirate, se stvari resnično segrejejo. Naučiti se morate, kako ponovno-organizirate predmete znotraj vsebnika, kako organizirati vsebine navpično, in kako ustvariti ekvidistantni razmik med različnimi vrsticami različne vsebine.

Srčkane male žabe vas lahko vabijo, toda prepričajte se, da je to težka igra.

Vendar pa, od popolnih novincev do bolj izkušenih spletnih razvijalcev, Igra je narejena za vse ravni. Zgodnje lekcije so lahkotne in poznejša lekcija vas lahko zapre nad zaslonom s kockami las na vaši strani.

Celotna izvorna koda igre je na voljo brezplačno na GitHubu, tako da jo lahko prenesete in predvajate lokalno, če želite.

Plus webapp je večjezična ponuja 20 jezikov vključno z angleščino, francoščino, nemščino, italijanščino, kitajščino, japonščino in rusko.

To bom priznal prerazporejanje žabe vas ne bo takoj naredilo gospodarjem flexbox. Toda te lekcije so namenjene spoznali boste sintakso flexbox tako se lahko počutite bolj udobno pri delu v resničnih scenarijih.

Če ste a spletni razvijalec vseh ravni znanja vsekakor si morate ogledati Flexbox Froggy. To je popolnoma brezplačno, zelo zabavno igrati in presenetljivo izobraževalne.