Õpeta ennast CSS Flexboxiga Flexbox Froggy mänguga

Varem oleme libistanud flexboxi ja selle toimimise alused. Kuid flexboxi rakendamine teie töövoo jaoks võib olla keeruline, sest see on nii keeruline täiendus CSS-spetsifikatsioonile.

Flexbox Froggy'iga saate õppige kõiki flexboxi põhialuseid lõbusa mänguga, mis hõlmab konnasid ja lilypade. Ma tean, et see kõlab hulluks, kuid see on tõsine veebisait.

Te alustate tasemel 1 ja töötage aeglaselt läbi 24 erinevat taset flexbox orientatsiooni paljude aspektide õpetamine. Varajane tase hakkab lihtsaks, paludes teil joondage üks või kaks konna ühe konteineri ääres. Varased õppetunnid sisaldavad ka näpunäiteid ja soovitusi, mis aitavad teil teel.

Aga kui olete saanud viimase õppetundi 10, siis tõesti soojeneb. Peate õppima, kuidas seda uuesti teha-korraldada konteineris asju, kuidas korraldada sisu vertikaalselt, ja kuidas luua võrdsed vahed erineva sisuga ridade vahel.

Armas väikesed konnad võivad teid meelitada, kuid ülejäänud veenduge, et see on raske mäng.

Kuid, alates algajatest kuni kogenumate veebiarendajateni, mäng on tehtud kõikidel tasanditel. Varased õppetunnid on imelihtsad ja hilisemad õppetunnid võivad jätta teie küljele hiirekihtidega ekraani..

Kogu mängu lähtekood on tasuta saadaval GitHubis, et saaksite seda kohapeal alla laadida ja soovi korral mängida.

Plus webapp on mitmekeelne 20 keelt sh inglise, prantsuse, saksa, itaalia, hiina, jaapani ja vene keel (pluss paljud teised).

Ma tunnistan seda konnade ümberkorraldamine ei tee teid kohe kapteniks flexboxi. Kuid need õppetunnid on mõeldud tutvuge flexboxi süntaksiga nii saate reaalsetes stsenaariumides töötada mugavamalt.

Kui olete a mis tahes oskuste taseme veebiarendaja Te peaksite kindlasti Flexbox Froggy'i läbi vaatama. See on täiesti tasuta, üsna lõbus mängida ja üllatavalt hariv.