Naučite CSS Flexbox sa Flexbox Froggy igrom

U prošlosti smo glossed preko flexbox i osnove kako to radi. No, primjena flexbox-a na vaš tijek rada može biti izazovna jer je to složen dodatak CSS-u.

Uz Flexbox Froggy možete naučite sve osnove flexboxa s zabavnom webgame koja uključuje žabe i lilipade. Znam da zvuči ludo, ali ovo je ozbiljno strašan webapp.

Počinjete na razini 1 i polako radite svoj put kroz 24 različite razine podučavanje mnogih aspekata flexbox orijentacije. Rane razine počinju lagano tražeći od vas poravnajte jednu ili dvije žabe duž jednog spremnika. Rani sati također uključuju savjete i prijedloge koji će vam pomoći na tom putu.

Ali jednom kada prođete lekciju 10 stvari se stvarno zagrijavaju. Morat ćete naučiti kako ponovno-organizirati stavke unutar spremnika, kako da organizirati sadržaj vertikalno, i kako stvoriti ekvidistantni razmak između različitih redova različitih sadržaja.

Slatke male žabe vas mogu namamiti, ali budite uvjereni da je ovo teška igra.

Međutim, od potpunih novaka do iskusnijih web programera, igra je napravljena za sve razine. Rana lekcija je povjetarac, a kasnija lekcija može vas ostaviti pogrbljenim preko ekrana s grudicama kose pored sebe.

Cijeli izvorni kod igre dostupan je besplatno na GitHubu tako da ga možete preuzeti i igrati lokalno, ako želite.

Plus webapp je višejezični nudeći 20 jezika uključujući engleski, francuski, njemački, talijanski, kineski, japanski i ruski (plus mnogi drugi).

Priznajem to preuređivanje žaba vas neće odmah učiniti gospodarom flexbox. Ali ove lekcije su namijenjene upoznajte se s flexbox sintaksom tako da se možete osjećati ugodnije raditi u scenarijima iz stvarnog svijeta.

Ako ste vi web developer bilo koje razine vještina svakako biste trebali provjeriti Flexbox Froggy. To je potpuno besplatno, vrlo zabavno igrati i iznenađujuće obrazovne.