Naučte sa CSS Flexbox s Flexbox Froggy Game

V minulosti sme sa pozreli na flexbox a základy, ako to funguje. Ale skutočné používanie flexboxu vo vašom pracovnom procese môže byť náročné, pretože je to tak zložitý doplnok k špecifikácii CSS.

S Flexbox Froggy môžete naučte sa všetky základy flexboxu so zábavnou webovou hrou, ktorá zahŕňa žaby a lilypady. Viem, že to znie ako blázon, ale to je vážne úžasné webapp.

Začínaš na úrovni 1 a pomaly pracovať si cestu cez 24 rôznych úrovniach vyučovanie mnohých aspektov orientácie flexboxu. Počiatočné úrovne začínajú ľahko tým, že vás žiadajú Zarovnajte jednu alebo dve žaby na jednej nádobe. Skoré lekcie tiež obsahujú tipy a návrhy, ktoré vám pomôžu pozdĺž cesty.

Ale akonáhle sa dostanete lekcie 10 vecí naozaj zahriať. Budete sa musieť naučiť ako znova-organizovať položky v kontajneri, ako usporiadať obsah vertikálne, a ako vytvoriť rovnaké vzdialenosti medzi rôznymi riadkami s rôznym obsahom.

Roztomilé žaby si vás môžu lákať, ale uistite sa, že ide o ťažkú ​​hru.

však, od úplných nováčikov až po skúsenejších vývojárov webu, hra sa robí pre všetky úrovne. Skoré hodiny sú vietor a neskoršie lekcie vám môžu nechať zakrútiť na obrazovke s zhlukom vlasov na vašej strane.

Úplný zdrojový kód hry je k dispozícii bezplatne na stránkach GitHub, takže si ho môžete stiahnuť a prehrávať lokálne.

Plus webapp je viacjazyčný ponúka 20 jazykov vrátane angličtiny, francúzštiny, nemčiny, taliančiny, čínštiny, japončiny a ruštiny (plus mnoho ďalších).

Priznám to preskupenie žabíkov vás okamžite nestane majstrom z flexboxu. Ale tieto lekcie sú určené na to oboznámte sa s syntaxou flexbox takže sa môžete cítiť pohodlnejšie pracovať v reálnych scenároch.

Ak ste webový vývojár ľubovoľnej úrovne zručností mali by ste sa rozhodne pozrieť na Flexbox Froggy. Je to úplne zadarmo, celkom zábavné hrať a prekvapivo vzdelávacie.