Lær deg CSS Flexbox med Flexbox Froggy Game

Tidligere har vi glanset over flexbox og grunnleggende om hvordan det fungerer. Men å bruke flexbox til arbeidsflyten din kan være utfordrende fordi det er så komplisert tillegg til CSS-spesifikasjonen.

Med Flexbox Froggy kan du lære alt det grunnleggende om flexbox med et morsomt webspill med frosker og lilypads. Jeg vet at det høres gal, men dette er alvorlig en fantastisk webapp.

Du starter på nivå 1 og Sakte jobbe deg gjennom 24 forskjellige nivåer lære de mange aspektene av flexbox orientering. De tidlige nivåene starter lett ved å spørre deg om Juster en eller to frosker langs en enkelt beholder. Tidlige leksjoner inneholder også tips og forslag for å hjelpe deg underveis.

Men når du kommer forbi leksjonen 10, blir ting virkelig oppvarmet. Du må lære å re-Organiser elementer i en beholder, hvordan organisere innhold vertikalt, og hvordan å lage likevidt avstand mellom forskjellige rader med forskjellig innhold.

De søte, små froskene kan lokke deg, men vær sikker på at dette er et tøft spill.

derimot, fra komplette nybegynnere til mer erfarne webutviklere, Spillet er laget for alle nivåer. De tidlige leksjonene er en bris, og senere leksjoner kan la deg hoppe over skjermen med klumper av hår ved din side.

Fullkildskilden er tilgjengelig gratis på GitHub, slik at du kan laste ned og spille den lokalt hvis du ønsker det.

Pluss webapp er flerspråklig tilbyr 20 språk inkludert engelsk, fransk, tysk, italiensk, kinesisk, japansk og russisk (pluss mange andre).

Jeg vil innrømme det Omarrangere frosker vil ikke umiddelbart gjøre deg til en mester av flexbox. Men disse leksjonene er ment å Bli kjent med flexbox-syntaksen slik at du kan føle deg mer komfortabel å jobbe i virkelige scenarier.

Hvis du er en webutvikler av hvilket som helst ferdighetsnivå Du bør definitivt sjekke ut Flexbox Froggy. Det er helt gratis, ganske morsomt å spille og overraskende lærerikt.