Mācīt sevi CSS Flexbox ar Flexbox Froggy spēli

Agrāk mēs esam noslīdējuši flexbox un tā darbības pamatus. Bet faktiski flexbox izmantošana jūsu darbplūsmai var būt sarežģīta, jo tas ir tik sarežģīts papildinājums CSS specifikācijai.

Ar Flexbox Froggy jūs varat iemācīties visus flexbox pamatus ar jautru tīmekļa spēli, kas ietver vardes un liljapadus. Es zinu, ka tas izklausās traks, bet tas ir nopietns webapp.

Jūs sākat 1. un 2. līmenī lēnām strādājiet pa 24 dažādiem līmeņiem mācīt daudzus flexbox orientācijas aspektus. Agrīnie līmeņi sāk viegli sākt, jautājot jums saskaņot vienu vai divas vardes vienā konteinerā. Agrās nodarbības ietver arī padomus un ieteikumus, lai palīdzētu jums ceļā.

Bet, kad jūs saņemsiet pēdējo stundu, 10 lietas patiešām sakarst. Jums būs jāiemācās, kā to atkārtot-organizēt vienumus konteinerā, kā organizēt saturu vertikāli, un kā izveidot līdzvērtīgas atstarpes starp dažādām satura rindām.

Pievilcīgie mazie vardes var jūs pievilināt, bet atpūsties pārliecinieties, ka tā ir grūta spēle.

Tomēr, no pilniem iesācējiem līdz pieredzējušākiem tīmekļa izstrādātājiem, spēle tiek veikta visiem līmeņiem. Sākotnējās nodarbības ir brīze, un vēlākās stundās jūs varēsiet pārvilkt ekrānu ar matiem, kas atrodas jūsu pusē.

Pilns spēles pirmkods ir pieejams bez maksas GitHub, lai jūs varētu lejupielādēt un atskaņot to lokāli, ja vēlaties.

Plus webapp ir daudzvalodu piedāvā 20 valodas ieskaitot angļu, franču, vācu, itāļu, ķīniešu, japāņu un krievu valodu (kā arī daudzus citus).

Es to atzīšu vardes pārkārtošana uzreiz nepadara jūs par kapteini flexbox. Bet šīs mācības ir domātas iepazīstieties ar flexbox sintaksi lai jūs varētu justies ērtāk strādāt reālos scenārijos.

Ja esat a jebkura prasmju līmeņa tīmekļa izstrādātājs jums noteikti vajadzētu pārbaudīt Flexbox Froggy. Tas ir pilnīgi bez maksas, diezgan jautri spēlēt un pārsteidzoši izglītojoši.