Leer jezelf CSS Flexbox met de Flexbox Froggy Game
In het verleden hebben we de flexbox verdoezeld en de basis van hoe het werkt. Maar het daadwerkelijk toepassen van flexbox op uw workflow kan een uitdaging zijn omdat het zo'n ingewikkelde toevoeging is aan de CSS-specificatie.
Met Flexbox Froggy kan dat leer alle basisbegrippen van flexbox met een leuke webgame met kikkers en lilypads. Ik weet dat het gek klinkt, maar dit is serieus een geweldige webapp.
Je begint op niveau 1 en werk langzaam je weg door 24 verschillende niveaus de vele aspecten van flexboxoriëntatie leren. De beginniveaus beginnen gemakkelijk door u te vragen om lijn een of twee kikkers uit langs een enkele container. Vroege lessen bevatten ook tips en suggesties om je op weg te helpen.
Maar als je voorbij les 10 bent, wordt alles echt warm. Je moet leren hoe te re-items in een container organiseren, hoe organiseren inhoud verticaal, en hoe te creëren op gelijke afstand tussen verschillende rijen met verschillende inhoud.
De schattige kleine kikkers kunnen je naar binnen lokken, maar wees er zeker van dat dit een moeilijk spel is.
Echter, van complete beginners tot meer ervaren webontwikkelaars, het spel is gemaakt voor alle niveaus. De eerste lessen zijn een fluitje van een cent en de latere lessen kunnen je gebogen over het scherm laten zitten met bosjes haar aan je zijde.
De volledige broncode van het spel is gratis beschikbaar op GitHub zodat je het lokaal kunt downloaden en afspelen als je dat wilt.
Bovendien is de webapp meertalig biedt 20 talen inclusief Engels, Frans, Duits, Italiaans, Chinees, Japans en Russisch (plus vele anderen).
Ik zal dat toegeven het herschikken van kikkers zal je niet meteen een meester maken van flexbox. Maar deze lessen zijn bedoeld om maak je bekend met de syntaxis van de flexbox zodat je je comfortabeler voelt in scenario's in de echte wereld.
Als je een bent webontwikkelaar van elk niveau je moet zeker Flexbox Froggy eens bekijken. Het is helemaal gratis, best leuk om te spelen en verrassend leerzaam.
