Išmokykite save „CSS Flexbox“ su „Flexbox Froggy“ žaidimu

Anksčiau mes pribloškėme flexbox ir pagrindus, kaip jis veikia. Bet faktiškai pritaikius „flexbox“ į savo darbo eigą, gali būti sudėtinga, nes tai toks sudėtingas papildymas CSS specifikacijoje.

Su Flexbox Froggy galite išmokti visus „flexbox“ pagrindus su įdomiu internetiniu žaidimu, kuriame dalyvauja varlės ir lilypads. Žinau, kad tai skamba beprotiškai, bet tai rimtai nuostabus žiniatinklis.

Jūs pradedate nuo 1 ir 1 lygio lėtai dirbkite per 24 skirtingus lygius daugelio lankstinukų orientavimo aspektų mokymas. Ankstyvieji lygiai pradedami lengvai paprašyti suvienodinti vieną ar dvi varles vienu konteineriu. Ankstyvosiose pamokose taip pat pateikiami patarimai ir pasiūlymai, padėsiantys jums padėti.

Bet kai jūs praeisite 10 pamokų, tai tikrai įkaista. Jums reikia išmokti iš naujo-organizuoti elementus konteinerio viduje, kaip organizuoti turinys vertikaliai, ir kaip sukurti vienodo atstumo tarpai tarp skirtingų turinio eilučių.

Mielos mažos varlės gali jus pritraukti, bet pailsėti užtikrinkite, kad tai yra sunkus žaidimas.

Tačiau, pradedantiesiems ir patyrusiems žiniatinklio kūrėjams, žaidimas atliekamas visais lygiais. Ankstyvosios pamokos yra vėjas, o vėlesnės pamokos gali palikti jums peršokusį ekraną su šonkauliais..

Visą žaidimo kodą galima nemokamai įsigyti „GitHub“, kad galėtumėte parsisiųsti ir leisti jį vietoje, jei norite.

Be to, žiniatinklis yra daugiakalbė siūlo 20 kalbų įskaitant anglų, prancūzų, vokiečių, italų, kinų, japonų ir rusų kalbas (taip pat daug kitų).

Aš tai pripažinsiu varlių pertvarkymas iš karto jums nesuteiks iš „flexbox“. Tačiau šios pamokos yra skirtos supažindinkite su flexbox sintaksė todėl galite jaustis patogiau dirbti realaus pasaulio scenarijuose.

Jei esate a bet kokio įgūdžių lygio interneto kūrėjas tikrai turėtumėte pasitikrinti „Flexbox Froggy“. Tai visiškai nemokama, gana smagu žaisti ir stebėtinai šviečia.