CSS to podstępna bestia. Setki właściwości, tuzin sposobów na wyśrodkowanie bloku i justify-content z 12 wartościami, które jeszcze łączą się z safe i unsafe. Ściągi ratują na początku, ale prawdziwe zrozumienie przychodzi dopiero z praktyką. Najlepiej nie na produkcji o trzeciej w nocy.

Na szczęście społeczność frontendowa wymyśliła lepszy sposób: gry. Tak, prawdziwe gry przeglądarkowe, w których steruje Pan/Pani żabami, broni wież, ratuje kosmitów i niepostrzeżenie opanowuje flexbox, grid i selektory. Żadnej teorii dla teorii, tylko kod, którego efekt widać od razu.

Zebrałem 8 darmowych gier CSS, które naprawdę działają w 2026 roku. Każda pokrywa konkretny temat, od podstawowych selektorów po transformacje 3D. Plus na końcu wideo z pełnym przejściem najpopularniejszej gry, gdyby utknął Pan/Pani na którymś poziomie.

💡 Szybki przegląd:

• Proszę otworzyć Flexbox Froggy: to najlepszy start dla początkujących, 24 poziomy z natychmiastową wizualną informacją zwrotną, obejmuje wszystkie kluczowe właściwości flexboksa.
• Proszę przejść do Grid Garden i tak samo, bawiąc się, rozłożyć na czynniki pierwsze CSS Grid, 28 poziomów od tych samych autorów z Codepip.
• Proszę podszlifować selektory w CSS Diner (32 poziomy): po niej żaden :nth-child() nie będzie straszny.
• Proszę opanować zaawansowane techniki: Flexbox Defense dla trybu bojowego, Unfold dla transformacji 3D, Roadmap dla czytania kodu źródłowego.

Krótkie porównanie: którą grę wybrać

Wideo: pełne przejście Flexbox Froggy z wyjaśnieniem każdej właściwości. Jeśli utknął Pan/Pani na którymś poziomie, proszę otworzyć timestamp w opisie.

1. Flexbox Froggy

To chyba najsłynniejsza gra CSS na świecie. Stworzona przez studio Codepip, przeprowadza Pana/Panią przez 24 poziomy, od prostego justify-content: flex-end do podchwytliwych kombinacji w rodzaju flex-direction, align-items, align-content, flex-wrap, flex-flow и order. Mechanika jest prosta: pisze Pan/Pani właściwość CSS, a żaba wskakuje na właściwą lilię.

Ostatni, 24. poziom, jest legendarny. Wymaga flex-direction: column-reverse razem z flex-wrap: wrap-reverse oraz align-content: space-between. Jeśli przejdzie go Pan/Pani za pierwszym razem, opanuje Pan/Pani flexboksa na piątkę.

🔗 Flexbox Froggy | 🔗 Kod źródłowy na GitHubie

2. Flexbox Defense

Tower Defense, gdzie zamiast dział są właściwości CSS. Pana/Pani wieże rozmieszczone są na siatce, a żeby wycelować nimi we wrogów, pisze Pan/Pani justify-content i align-items. 12 poziomów obejmuje align-items, justify-content, flex-direction, align-self и order.

Ostatnie 4 poziomy, poważne wyzwanie nawet dla tych, którzy przeszli już Flexbox Froggy. Żadnych podpowiedzi: tylko Pan/Pani, przeglądarka i fale wrogów. Autor, Channing Allen, udostępnił grę na GitHubie jako całkowicie otwartą.

🔗 Flexbox Defense | 🔗 Kod źródłowy

3. Grid Garden

Od autorów Flexbox Froggy, ten sam pomysł, ale dla CSS Grid. Podlewa Pan/Pani grządki z marchewką, pisząc grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area и order. 28 poziomów, o 4 więcej niż w Froggy.

Gra sięga głębiej niż podstawowe grid-template-columns: 1fr 1fr. Na poziomach 25+ operuje Pan/Pani grid-area z nazwanymi obszarami, techniką, która w rzeczywistych projektach zastępuje większość flexboksowych protez dla siatek.

🔗 Grid Garden | 🔗 Kod źródłowy

4. CSS Diner

32 poziomy na selektory CSS, od banalnego plate do plate:only-child i apple:not(.small). „Zamawiają" Państwo elementy ze stołu, wpisując selektor w edytorze po prawej stronie. Podświetlanie w czasie rzeczywistym pokazuje, co dokładnie zostało uchwycone.

Najcenniejsze są tutaj poziomy z pseudoklasami. Po CSS Diner konstrukcje takie jak :nth-child(2n+3), :last-of-type, :only-of-type przestają wywoływać chęć otwarcia MDN. A 32. poziom (plate pickles + apple:not(.small)) to godny finał dla tych, którzy chcą nazywać się ekspertami od selektorów.

🔗 CSS Diner | 🔗 Kod źródłowy

5. Unfold

Formalnie nie jest to gra, lecz interaktywna prezentacja transformacji CSS 3D autorstwa Chrisa Ruppela. Przewijają Państwo stronę, a ta rozwija się w trójwymiarowej przestrzeni. rotateX, rotateY, translateZ, perspective: wszystko, co w dokumentacji brzmi groźnie, tutaj pokazano w sposób obrazowy.

Nie trzeba pisać ani jednej linii kodu. Wystarczy przewijać, patrzeć, jak płaski prostokąt zamienia się w sześcian, i czytać komentarze autora. Po tym transformacje 3D przestają wydawać się czarną magią.

🔗 Unfold | 🔗 Kod źródłowy

6. Roadmap

Mała arkada od Victora Darrasa: samochodzik jedzie drogą, a Pan steruje nim myszką. Cała gra została napisana w czystym CSS i HTML, bez ani jednej linii JavaScriptu. Oznacza to, że można otworzyć DevTools i zobaczyć, jak dokładnie działają clip-path, transform oraz animacje @keyframes.

Sama gra nie uczy CSS bezpośrednio. Jednak studiowanie kodu źródłowego to minikurs zaawansowanych technik. Potrzebowałem 8 prób, żeby wygrać.

🔗 Roadmap na CodePen

7. Carnival

Strzelnica w czystym CSS od Uny Kravets z zespołu Google Chrome. Ma Pan 8 sekund, aby trafić wszystkie cele. Cała logika opiera się na checkboxach i animacjach CSS: cele poruszają się, pojawiają i znikają bez ani jednej linijki skryptu.

Link do CodePen poniżej prowadzi do pełnego kodu źródłowego, można go sforkować, pokręcić timingami w @keyframes i stworzyć własną wersję. Świetne ćwiczenie, by zrozumieć, jak daleko można zajść z samym tylko CSS.

🔗 Carnival na CodePen

8. Tic-Tac-Toe

Klasyka w nieoczekiwanym wydaniu: kółko i krzyżyk bez JavaScript. Alvaro Montoro zaimplementował logikę gry wyłącznie na checkboxach, pseudoklasie :checked i animacjach CSS. Dwa poziomy trudności, na drugim komputer „myśli" nieco lepiej (o ile to możliwe bez skryptów).

Praktyczna korzyść: po przeanalizowaniu kodu źródłowego zrozumieją Państwo, jak działają selektory rodzeństwa (+), :checked i jak budować złożoną logikę wyłącznie na stylach. Dla projektów hobbystycznych i demonstracyjnych, bezcenna technika.

🔗 Tic-Tac-Toe na CodePen

⁉️🤔 Często zadawane pytania

Czy te gry pomogą początkującemu, który w ogóle nie zna CSS?

Tak, właśnie do tego zostały stworzone. Proszę zacząć od Flexbox Froggy, gra przeprowadzi Pana/Panią od justify-content: flex-start do złożonych kombinacji bez żadnej wcześniejszej wiedzy. Równolegle proszę mieć otwartą dokumentację MDN o Flexboksie dla kontekstu. W 2-3 wieczory w pełni opanuje Pan/Pani temat flexboksa.

Czy doświadczonemu programiście opłaca się przechodzić te gry?

Tak, ale wybiórczo. Zamiast Flexbox Froggy (będzie nudno na pierwszych 15 poziomach) proszę od razu wziąć Flexbox Defense, bojową atmosferę i ostrzejsze ograniczenia. Grid Garden jest przydatna nawet dla tych, którzy piszą grid-template-columns codziennie: 25+ poziomów z grid-area pokazuje techniki rzadko spotykane w poradnikach. CSS Diner na poziomach 25-32 to najlepszy test znajomości pseudoklas.

Dlaczego gry, a nie kurs wideo lub dokumentacja?

Gry dają natychmiastową wizualną informację zwrotną: napisał Pan/Pani align-items: center i od razu zobaczył/a, jak żaba wskoczyła na środek. To fundamentalna różnica w porównaniu z pasywnym oglądaniem wideo: kształtuje się pamięć mięśniowa, ponieważ samodzielnie pisze Pan/Pani kod. Do tego element wyzwania: chęć przejścia kolejnego poziomu motywuje lepiej niż jakikolwiek deadline.

Czy te gry są zgodne z nowoczesnymi specyfikacjami CSS (2026)?

Tak. Flexbox i Grid to dojrzałe specyfikacje, ich podstawowe właściwości nie zmieniały się od lat. Nowe możliwości, takie jak align-content w zwykłym przepływie (2024) czy warunki if() (2025), nie są w tych grach uwzględnione, ale to niszowe funkcje, które nie są potrzebne w codziennej pracy. Do zdecydowanej większości rzeczywistych layoutów wystarcza to, czego uczą te gry.

Co zrobić, jeśli gra nie działa w mojej przeglądarce?

Wszystkie 8 gier testowano w Chrome i Firefox, nie wykryto problemów. Jeśli gra się nie ładuje: proszę sprawdzić, czy JavaScript nie jest zablokowany (Flexbox Defense i Roadmap wymagają skryptów); proszę spróbować otworzyć w trybie incognito (rozszerzenia czasem psują układ). Tic-Tac-Toe i Carnival na CodePen mogą wymagać kliknięcia „Run", aby uruchomić.

Czy warto grać w CSS w 2026 roku?

Te 8 gier to nie tylko rozrywka na wieczór. Każda z nich wypełnia konkretną lukę: Flexbox Froggy plus Flexbox Defense dają pełne pokrycie flexboksa z różnych perspektyw, Grid Garden to najbardziej bezbolesne wejście w CSS Grid, CSS Diner uczy selektorów bez wkuwania, a Roadmap, Carnival i Tic-Tac-Toe pokazują, jak głęboko można zajść, używając wyłącznie CSS.

Jeśli jest Pan/Pani początkujący/a, proszę zacząć od Froggy, potem Grid Garden, a następnie Diner. Trzy wieczory i opanuje Pan/Pani większość tego, co jest realnie potrzebne w pracy. Jeśli jest Pan/Pani doświadczony/a, proszę pominąć pierwsze 15 poziomów Froggy, ale koniecznie przejść CSS Diner do końca i przeanalizować kod źródłowy Carnival. Jedno i drugie zajmie mniej niż godzinę.

Wszystkie 8 gier jest darmowych, otwartych (oprócz Roadmap, kod źródłowy można odczytać bezpośrednio w DevTools) i działają w 2026 roku bez zmian. Żadnej rejestracji, żadnych płatnych planów. Proszę otworzyć pierwszą grę i pisać CSS.