CSS on keeruline teema. Sajad omadused, kümmekond viisi ploki keskele joondamiseks ja justify-content 12 väärtusega, mis kombineeruvad veel safe ja unsafe võtmesõnadega. Spikrid aitavad alguses, kuid tõeline arusaam tuleb ainult praktika käigus. Soovitavalt mitte toodangukeskkonnas kell kolm öösel.

Õnneks tuli frontend-kogukond välja parema lahendusega: mängud. Jah, päris brauserimängud, kus juhite konni, kaitsete torne, päästete tulnukaid ja omandate märkamatult flexbox'i, grid'e ja selektoreid. Ei mingit teooriat teooria pärast, vaid kood, mille tulemust näete kohe.

Olen kokku kogunud 8 tasuta CSS-mängu, mis 2026. aastal reaalselt töötavad. Igaüks katab kindlat teemat, alates lihtsatest selektoritest kuni 3D-teisendusteni. Lisaks on lõpus video kõige populaarsema mängu täieliku läbimänguga, juhuks kui mõnel tasemel jänni jääte.

💡 Kiire ülevaade:

• Alustage Flexbox Froggy'ga: parim lähtepunkt algajatele, 24 taset kohese visuaalse tagasisidega, hõlmates kõiki peamisi flexbox'i omadusi.
• Liikuge edasi Grid Gardeni juurde ja omandage mänguliselt CSS Grid, 28 taset samadelt autoritelt Codepip'ist.
• Lihvige oma selektoreid CSS Diner'is (32 taset): pärast seda ei hirmuta teid ükski :nth-child().
• Omandage edasijõudnute tehnikad: Flexbox Defense lahingurežiimi jaoks, Unfold 3D-teisenduste jaoks, Roadmap lähtekoodi lugemise jaoks.

Kiire võrdlus: milline mäng valida

Video: Flexbox Froggy täielik läbimäng koos iga omaduse selgitusega. Kui jääte mõnel tasemel jänni, vaadake kirjelduses olevat ajatemplit.

1. Flexbox Froggy

See on ilmselt maailma kuulsaim CSS-mäng. Codepip stuudio loodud mäng viib teid läbi 24 taseme, alates lihtsast justify-content: flex-end kuni keeruliste kombinatsioonideni nagu flex-direction, align-items, align-content, flex-wrap, flex-flow and order. Mehaanika on lihtne: kirjutate CSS-omaduse ja konn hüppab õigele vesiroosilehele.

Viimane tase, 24, on legendaarne. See nõuab flex-direction: column-reverse koos flex-wrap: wrap-reverse ja align-content: space-between omadustega. Kui läbite selle esimese katsega, olete flexbox'i suurepäraselt selgeks saanud.

🔗 Flexbox Froggy | 🔗 Lähtekood GitHubis

2. Flexbox Defense

Tornikaitse, kus kahurite asemel on CSS-omadused. Teie tornid on paigutatud ruudustikule ja nende vaenlaste pihta suunamiseks kirjutate justify-content ja align-items väärtusi. 12 taset hõlmavad align-items, justify-content, flex-direction, align-self and order omadusi.

Viimased 4 taset on tõsine väljakutse isegi neile, kes on Flexbox Froggy juba läbinud. Vihjeid pole: ainult teie, brauser ja vaenlaste lained. Autor, Channing Allen, avaldas mängu GitHubis täiesti avatud lähtekoodiga.

🔗 Flexbox Defense | 🔗 Lähtekood

3. Grid Garden

Flexbox Froggy autoritelt, sama idee, aga CSS Gridi jaoks. Kastad porgandipeenraid, kirjutades grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area and order. 28 taset, 4 rohkem kui Froggyl.

Mäng läheb sügavamale kui lihtne grid-template-columns: 1fr 1fr. Tasemetel 25+ töötad grid-area'ga, kasutades nimega alasid, tehnika, mis päris projektides asendab enamiku flexboxi häkkidest ruudustike puhul.

🔗 Grid Garden | 🔗 Lähtekood

4. CSS Diner

32 taset CSS-selektoritest, alates lihtsast plate kuni plate:only-child ja apple:not(.small)'ini. „Tellid" laualt elemente, kirjutades paremal asuvasse redaktorisse selektori. Reaalajas esiletõst näitab täpselt, mille oled valinud.

Kõige väärtuslikum osa on siin pseudoklassidega tasemed. Pärast CSS Dinerit ei tekita konstruktsioonid nagu :nth-child(2n+3), :last-of-type, :only-of-type enam tahtmist MDN-i avada. Ja tase 32 (plate pickles + apple:not(.small)) on väärikas finaal neile, kes tahavad end selektorite ekspertideks nimetada.

🔗 CSS Diner | 🔗 Lähtekood

5. Unfold

Tehniliselt pole see mäng, vaid CSS 3D transformatsioonide interaktiivne esitlus, mille autor on Chris Ruppel. Kerid ja leht rullub lahti kolmemõõtmelises ruumis. rotateX, rotateY, translateZ, perspective: kõik, mis dokumentatsioonis hirmutavalt kõlab, on siin visuaalselt näidatud.

Pole vaja kirjutada ühtki koodirida. Lihtsalt keri, vaata, kuidas lame ristkülik muutub kuubiks, ja loe autori kommentaare. Pärast seda ei tundu 3D-transformatsioonid enam musta maagiana.

🔗 Unfold | 🔗 Lähtekood

6. Roadmap

Väike arkaadmäng autorilt Victor Darras: auto liigub mööda teed ja sina juhid seda hiirega. Kogu mäng on kirjutatud puhtas CSS-is ja HTML-is, mitte ühtegi rida JavaScripti. See tähendab, et saad avada DevToolsi ja täpselt näha, kuidas clip-path, transform ja @keyframes animatsioonid töötavad.

Mäng ise CSS-i otseselt ei õpeta. Kuid lähtekoodi uurimine on minikursus edasijõudnute tehnikatest. Mul kulus võitmiseks 8 katset.

🔗 Roadmap CodePenis

7. Carnival

Puhas CSS-is lasketiir, autor Una Kravets Google Chrome'i meeskonnast. Sul on 8 sekundit, et tabada kõik märklauad. Kogu loogika põhineb märkeruutudel ja CSS-animatsioonidel: märklauad liiguvad, ilmuvad ja kaovad ilma ühegi skriptireata.

Allolev CodePeni link viib täieliku lähtekoodi juurde, saad selle harutada, @keyframes-i ajastusi muuta ja teha oma versiooni. Suurepärane harjutus mõistmaks, kui kaugele on võimalik ainult CSS-iga jõuda.

🔗 Carnival CodePenis

8. Trips-traps-trull

Klassika ootamatus teostuses: trips-traps-trull ilma JavaScriptita. Alvaro Montoro realiseeris mänguloogika eranditult märkeruutude, :checked pseudoklassi ja CSS-animatsioonide abil. Kaks raskusastet, teisel tasemel arvuti „mõtleb" veidi paremini (nii palju kui skriptideta võimalik).

Praktiline kasu: pärast lähtekoodi uurimist saad aru, kuidas töötavad naabersektorid (+), :checked ja kuidas ehitada keerukat loogikat ainult stiilidega. Lemmikprojektide ja demode jaoks hindamatu tehnika.

🔗 Trips-traps-trull CodePenis

⁉️🤔 Korduma kippuvad küsimused

Kas need mängud aitavad täielikku algajat, kes CSS-i üldse ei tunne?

Jah, just selleks need loodud ongi. Alusta Flexbox Froggyga, mäng viib sind justify-content: flex-start-ist keerukate kombinatsioonideni ilma igasuguste eelteadmisteta. Hoia konteksti jaoks paralleelselt lahti MDN Flexboxi dokumentatsioon. 2-3 õhtuga katad flexboxi teema täielikult.

Kas kogenud arendajal on neid mänge mõtet läbi teha?

Jah, aga valikuliselt. Flexbox Froggy asemel (esimesed 15 taset on igavad) võta kohe ette Flexbox Defense, lahinguatmosfäär ja rangemad piirangud. Grid Garden on kasulik isegi neile, kes kirjutavad grid-template-columns-i iga päev: tasemed 25+ koos grid-area-ga näitavad tehnikaid, mida õpetustes harva kohtab. CSS Dineri tasemed 25-32 on parim test pseudoklasside tundmise kontrollimiseks.

Miks mängud, mitte videokursus või dokumentatsioon?

Mängud pakuvad kohest visuaalset tagasisidet, kirjutasid align-items: center ja nägid kohe, kuidas konn keskele hüppas. See on põhimõtteline erinevus võrreldes passiivse video vaatamisega: lihasmälu kujuneb, sest kirjutad koodi ise. Lisaks väljakutse element: soov järgmine tase läbida hoiab sind paremini töös kui ükski tähtaeg.

Kas need mängud vastavad kaasaegsetele CSS-i spetsifikatsioonidele (2026)?

Jah. Flexbox ja Grid on küpsed spetsifikatsioonid, nende põhiomadused pole aastaid muutunud. Uued funktsioonid nagu align-content tavalises voos (2024) või if() tingimused (2025) ei ole nendes mängudes kaetud, kuid need on nišifunktsioonid, mida igapäevatöös vaja ei lähe. Valdava enamuse reaalsete küljenduste jaoks piisab sellest, mida need mängud õpetavad.

Mida teha, kui mäng minu brauseris ei tööta?

Kõiki 8 mängu testiti Chrome'is ja Firefoxis, probleeme ei leitud. Kui mäng ei lae: kontrolli, kas JavaScript on blokeeritud (Flexbox Defense ja Roadmap vajavad skripte); proovi avada inkognito režiimis (laiendused võivad mõnikord küljenduse katki teha). Tic-Tac-Toe ja Carnival CodePen-is võivad käivitamiseks vajada nupule „Run" vajutamist.

Kas CSS-i mänge tasub 2026. aastal mängida?

Need 8 mängu pole lihtsalt meelelahutus üheks õhtuks. Igaüks neist täidab konkreetse lünga: Flexbox Froggy ja Flexbox Defense annavad koos täieliku flexboxi katvuse erinevate nurkade alt, Grid Garden on kõige valutum sisenemine CSS Gridi, CSS Diner on selektorid ilma päheõppimiseta ning Roadmap, Carnival ja Tic-Tac-Toe näitavad, kui sügavale ainult CSS-iga minna saab.

Kui oled algaja, alusta Froggyst, seejärel Grid Garden, siis Diner. Kolm õhtut ja sa valdad suuremat osa sellest, mida töös tegelikult vaja läheb. Kui oled kogenud, jäta Froggy esimesed 15 taset vahele, kuid kindlasti tee CSS Diner lõpuni ja uuri Carnivali lähtekoodi. Mõlemale kulub alla tunni.

Kõik 8 mängu on tasuta, avatud (välja arvatud Roadmap, lähtekood on otse DevToolsis loetav) ja töötavad 2026. aastal muudatusteta. Pole registreerimist, pole tasulisi pakette. Ava esimene mäng ja kirjuta CSS-i.