Lär dig själv CSS Flexbox med Flexbox Froggy Game

Tidigare har vi glossat över flexbox och grunderna för hur det fungerar. Men att använda flexbox till ditt arbetsflöde kan vara utmanande eftersom det är så komplicerat tillägg till CSS-specifikationen.

Med Flexbox Froggy kan du lära sig alla grunderna i flexbox med ett roligt webbspel med grodor och lilypader. Jag vet att det låter galet men det här är allvarligt en fantastisk webapp.

Du börjar på nivå 1 och arbeta långsamt igenom 24 olika nivåer undervisa de många aspekterna av flexbox orientering. De tidiga nivåerna börjar enkelt genom att fråga dig anpassa en eller två grodor längs en enda behållare. Tidiga lektioner innehåller också tips och förslag som hjälper dig på vägen.

Men när du kommer förbi lektionen 10 värmer upp saker verkligen. Du måste lära dig hur man återkommer-organisera föremål i en behållare, hur organisera innehåll vertikalt, och hur man skapar ekvivalent avstånd mellan olika rader av olika innehåll.

De söta lilla grodorna kan locka dig in, men försäkra dig om att det här är ett tufft spel.

dock, från kompletta nybörjare till mer erfarna webbutvecklare, spelet är gjord för alla nivåer. De tidiga lektionerna är en bris och de senare lektionerna kan låta dig krossas över skärmen med klumpar av håret vid din sida.

Den fullständiga spelkällkoden är tillgänglig gratis på GitHub så att du kan ladda ner och spela den lokalt om du vill.

Plus webappen är flerspråkig erbjuder 20 språk inklusive engelska, franska, tyska, italienska, kinesiska, japanska och ryska (plus många andra).

Jag kommer att erkänna det Omarrangera grodor kommer inte omedelbart att göra dig till en mästare av flexbox. Men dessa lektioner är avsedda att få dig bekant med flexboxsyntaxen så att du kan känna dig mer bekväm att arbeta i verkliga scenarier.

Om du är en webbutvecklare av någon kompetensnivå Du bör definitivt kolla in Flexbox Froggy. Det är helt gratis, roligt att spela och förvånansvärt pedagogiskt.