Opeta itsellesi CSS Flexbox Flexbox Froggy -pelissä

Aiemmin olemme hihoittaneet flexboxin ja sen toiminnan perusteet. Mutta flexboxin soveltaminen työnkulkuun voi olla haastavaa, koska se on niin monimutkainen lisä CSS-spesifikaatioon.

Flexbox Froggy -palvelussa voit oppia kaikki flexboxin perusteet hauskalla web-pelillä, johon kuuluu sammakoita ja lilypadeja. Tiedän, että se kuulostaa hullulta, mutta tämä on vakavasti mahtava webapp.

Aloit tasolle 1 ja Työskentele hitaasti läpi 24 eri tasoa opettamalla flexbox-orientaation monia näkökohtia. Alkuvaiheet alkavat helposti pyytämällä sinua kohdista yksi tai kaksi sammakkoa yhden säiliön pitkin. Varhaisopetus sisältää myös vinkkejä ja ehdotuksia, jotka auttavat sinua matkan varrella.

Mutta kun olet saanut oppitunnin 10, asiat todella kuumenevat. Sinun täytyy oppia uudelleen-järjestää esineitä säiliössä, miten järjestää pitoisuus pystysuoraan, ja miten luoda tasapuolinen etäisyys eri rivien välillä.

Söpö pikku sammakot voivat houkutella sinut, mutta levätä varma, että tämä on kova peli.

kuitenkin, täydellisistä aloittelijoista kokeneempiin web-kehittäjiin, peli tehdään kaikilla tasoilla. Varhaiset oppitunnit ovat tuulta, ja myöhemmät oppitunnit voivat jättää sinut hemmottelemaan näytön yli hiustenneipien kanssa.

Pelin lähdekoodi on saatavilla ilmaiseksi GitHubissa, joten voit ladata ja toistaa sitä paikallisesti, jos haluat.

Plus webapp on monikielinen tarjoaa 20 kieltä mukaan lukien englanti, ranska, saksa, italia, kiina, japani ja venäjä (sekä monet muut).

Myönnän sen sammakoiden järjestäminen ei heti tee sinusta mestaria flexboxista. Mutta nämä oppitunnit on tarkoitettu tutustu flexbox-syntaksiin joten voit tuntea olonsa mukavammaksi reaalimaailman skenaarioissa.

Jos olet a minkä tahansa taitotason web-kehittäjä sinun kannattaa tarkistaa Flexbox Froggy. Se on täysin ilmainen, melko hauska pelata ja yllättävän koulutuksellinen.