Învățați-vă CSS Flexbox cu jocul Flexbox Froggy

În trecut, am analizat flexbox-ul și principiile de funcționare. Dar aplicarea efectivă a flexbox-ului la fluxul de lucru poate fi dificilă, deoarece este un plus atât de complicat pentru spec. CSS.

Cu Flexbox Froggy poți aflați toate elementele de bază ale flexbox-ului cu o minge de jocuri distractivă care implică broaște și lilipede. Știu că sună nebun, dar acest lucru este într-adevăr un webapp minunat.

Începeți la nivelul 1 și încet lucrați prin 24 de niveluri diferite învățând multe aspecte ale orientării flexbox. Nivelurile timpurii încep prin a vă solicita aliniați una sau două broaște de-a lungul unui singur recipient. Lecțiile timpurii includ, de asemenea, sfaturi și sugestii pentru a vă ajuta pe parcurs.

Dar odată ce ați trecut lecția, 10 lucruri se încălzesc. Va trebui să înveți cum să reînsuflețești-organizați articolele într-un container, cum să organiza conţinut vertical, și cum să creați echidistanta între diferite rânduri de conținut diferit.

Broaștele drăguțe vă pot atrage, dar asigurați-vă că este un joc dur.

in orice caz, de la începători complet la dezvoltatori web mai experimentați, jocul se face pentru toate nivelele. Lecțiile timpurii sunt o briză, iar lecțiile de mai târziu vă pot lăsa să vă înțepați deasupra ecranului cu buzunare de păr lângă dumneavoastră.

Codul sursă complet al jocului este disponibil gratuit pe GitHub, astfel încât să îl puteți descărca și să îl redați local dacă doriți.

În plus, aplicația web este multilingvă oferind 20 de limbi inclusiv engleză, franceză, germană, italiană, chineză, japoneză și rusă (plus multe altele).

Voi recunoaște asta rearanjarea broaștelor nu vă va face imediat stăpân de flexbox. Dar aceste lecții sunt menite să vă familiarizați cu sintaxa flexbox astfel încât să vă simțiți mai confortabil în scenarii din lumea reală.

Dacă ești dezvoltator web de orice nivel de calificare ar trebui să verificați cu siguranță Flexbox Froggy. Este complet gratuit, destul de distractiv de jucat și surprinzător de educativ.