Undervis dig selv CSS Flexbox med Flexbox Froggy Game

Tidligere har vi glosset over flexbox og det grundlæggende i hvordan det virker. Men faktisk at anvende flexbox til din workflow kan være udfordrende, fordi det er en så kompliceret tilføjelse til CSS spec.

Med Flexbox Froggy kan du lære alt det grundlæggende i flexbox med et sjovt webspil med frøer og lilypads. Jeg ved, det lyder vanvittigt, men det er alvorligt en fantastisk webapp.

Du starter på niveau 1 og langsomt arbejde dig gennem 24 forskellige niveauer undervise de mange aspekter af flexbox orientering. De tidlige niveauer begynder let ved at bede dig om juster en eller to frøer langs en enkelt beholder. Tidlige lektioner indeholder også tips og forslag til at hjælpe dig undervejs.

Men når du kommer forbi lektion 10, bliver ting virkelig varme op. Du skal lære at re-Organiser varer i en beholder, hvordan organisere indhold lodret, og hvordan man opretter lige afstand mellem forskellige rækker af forskelligt indhold.

De søde små frøer kan lokke dig ind, men vær sikker på at dette er et hårdt spil.

Imidlertid, fra komplette nybegyndere til mere erfarne webudviklere, spillet er lavet til alle niveauer. De tidlige lektioner er en brise, og de senere lektioner kan efterlade dig hunched over skærmen med klumper af hår ved din side.

Den fulde spilkildekode er tilgængelig gratis på GitHub, så du kan downloade og afspille den lokalt, hvis du ønsker det.

Plus webapp er flersproget tilbyder 20 sprog herunder engelsk, fransk, tysk, italiensk, kinesisk, japansk og russisk (plus mange andre).

Jeg vil indrømme det Omlægning af frøer vil ikke straks gøre dig til en mester af flexbox. Men disse lektioner er ment til få dig fortrolig med flexbox syntaksen så du kan føle dig mere behagelig at arbejde i virkelige scenarier.

Hvis du er en webudvikler af et hvilket som helst færdighedsniveau du bør helt sikkert tjekke ud Flexbox Froggy. Det er helt gratis, meget sjovt at spille og overraskende pædagogisk.