Naucz się CSS z grami: Flexbox Froggy i Grid Garden

Zacznij od Flexbox Froggy, aby przećwiczyć wyrównanie wzdłuż osi, a następnie użyj Grid Garden, aby przećwiczyć umieszczanie elementu między liniami siatki. Po każdym ćwiczeniu w grze odtwórz pomysł na własnej małej stronie. Przydatnym rezultatem jest możliwość wyjaśnienia, dlaczego deklaracja działa, gdy zmienia się układ, zamiast zapamiętywania odpowiedzi z konkretnego poziomu.

Jak nauczyć się CSS za pomocą gier, a następnie go zastosować

Ta ścieżka łączy dwie gry z trzema oryginalnymi ćwiczeniami. Jest odpowiednia dla kogoś, kto potrafi odczytać prostą regułę CSS i chce uzyskać widoczną informację zwrotną. Nie jest to kompletny kurs tworzenia stron internetowych: prawdziwe interfejsy również wymagają czytelnej treści, responsywności, dostępu z klawiatury i testowania z różną ilością tekstu.

Wybierz odpowiednie ćwiczenie do swojego pytania

Gry są stworzone przez Codepip. Cozcade łączy każdą hostowaną grę z odpowiadającym jej przewodnikiem: Flexbox Froggy i jej przewodnik; Grid Garden i jej przewodnik. Oryginalne strony Froggy i Grid Garden zawierają wersje autorskie autorów. Używaj klawiatury podczas wykonywania ćwiczeń z kodem.

Najpierw nazwij oś przed wyborem właściwości.

Flexbox ma oś główną i oś poprzeczną. flex-direction ustawia kierunek główny; justify-content pozycjonuje elementy wzdłuż tej osi głównej, a align-items dotyczy osi poprzecznej. W normalnym wierszu od lewej do prawej oś główna jest pozioma. Zmiana kierunku na kolumnę powoduje, że staje się ona pionowa. Definicje te omówiono w Wprowadzenie do Flexboxa MDN.

Zanim wypróbujesz deklaracje w Froggy, określ, w którym kierunku mają się poruszać elementy. Następnie nazwij ten kierunek w odniesieniu do bieżącej osi głównej. To zmienia błędną odpowiedź w konkretne pytanie: czy wybrałeś złą właściwość, złą wartość, czy złą oś?

Ćwiczenie 1: przenieś grupę na koniec

Utwórz trzy małe elementy w kontenerze. To oryginalne ćwiczenie, a nie kopia poziomu gry ani klucza odpowiedzi.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Twoim celem jest przesunięcie trzech elementów razem w kierunku prawej krawędzi, bez zmiany ich kolejności ani przydzielania każdemu elementowi osobnego marginesu. Przewidź wynik, a następnie dodaj justify-content: flex-end do kontenera.

Teraz porównaj to z justify-content: space-between. Pierwsza opcja przesuwa grupę; druga rozdziela dostępną przestrzeń między elementami. Wypróbuj wąski i szeroki kontener. Wyjaśnij, którą wersję wybrałbyś dla trzech przycisków, które powinny pozostać blisko siebie. Widoczny wynik jest ważniejszy niż zapamiętanie jednej wartości.

Ćwiczenie 2: zachowaj tę samą instrukcję, zmień oś

Użyj ponownie tego kontenera, dodaj flex-direction: column, ustaw height: 12rem i zachowaj justify-content: flex-end. Elementy są teraz gromadzone w dół. Twoja deklaracja nie stała się poleceniem „przesuń w prawo”: nadal działa wzdłuż osi głównej, którą zmieniłeś.

Następnie dodaj align-items: flex-start. Porównaj układ przed i po tym dodaniu. Przy określonym kierunku od lewej do prawej, elementy są wyrównywane w lewo na osi poprzecznej. Usuń deklarację i ponownie obserwuj domyślne zachowanie rozciągania.

Napisz krótkie wyjaśnienie obu zmian, nie używając sformułowania „po prostu działa”. Na przykład zidentyfikuj oś, wolną przestrzeń i pozycjonowaną grupę. Jeśli nie potrafisz wyjaśnić wyniku, zredukuj przykład do dwóch elementów i zmieniaj tylko jedną deklarację na raz. To nawyk, który warto wprowadzić do gry.

Następnie odróżnij tor siatki od jego granicy.

Umiejscowienie siatki wykorzystuje linie otaczające wiersze i kolumny. Pięć wyraźnych kolumn ma sześć linii granicznych. Element umieszczony od wiersza kolumny 3 do wiersza 5 obejmuje dwie kolumny, a nie trzy. Zobacz Wprowadzenie do siatki MDN, aby dowiedzieć się, jak odróżnić tory, komórki i linie.

W Grid Garden przeczytaj granice początkowe i końcowe przed wypróbowaniem pozycji. Narysuj lub opisz granice na własnej stronie, jeśli liczenie odstępów jest trudne.

Ćwiczenie 3: umieść kartę między dwoma wierszami

Zbuduj pięciokolumnową planszę i daj jej jedną kartę:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Przewidź, gdzie pojawi się karta przed otwarciem strony. Następnie spraw, aby objęła całą planszę, zmieniając jedynie rozmieszczenie kolumn. Dzięki pięciu wyraźnym kolumnom powyżej, grid-column: 1 / 6 sięga od pierwszej do ostatniej granicy.

Na koniec zmień tekst na znacznie dłuższe zdanie i zwęź okno przeglądarki. Zasada rozmieszczenia może pozostać prawidłowa, podczas gdy stała wysokość karty staje się nieodpowiednia dla jej zawartości. Ćwiczenie z rozwiązywaniem gier uczy jednej części układu; stworzenie użytecznej strony wymaga również sprawdzenia zawartości.

Używaj postępów w grze jako informacji zwrotnej, a nie dowodu opanowania

Po udanym ćwiczeniu zmień jedno założenie: kierunek, liczbę elementów, dostępną szerokość lub długość tekstu. Przewiduj wynik, zanim zaczniesz szukać. Jeśli potrafisz dostosować pomysł i wyjaśnić zmianę, nauczyłeś się więcej niż odpowiedź na poziomie.

Powracając do gry, sprawdź, czy otwierasz tę samą wersję i to samo środowisko przeglądarki. Ulubione konta Cozcade identyfikują gry, do których chcesz powrócić; nie gwarantują one, że wewnętrzne postępy w grze będą przesyłane między urządzeniami. Unikaj usuwania zapisanych danych witryny podczas sprawdzania postępów i korzystaj z funkcji eksportu tylko wtedy, gdy dana gra ją oferuje.

Kontynuuj z przewodnikiem dopasowującym

Skorzystaj z przewodnika Froggy do ćwiczenia osi i ustawienia oraz z przewodnika Grid Garden do pytań sprawdzających umiejętności. Jeśli chcesz później ćwiczyć w inny sposób, przejrzyj gry edukacyjne.

Powyższe ćwiczenia zostały napisane na potrzeby tego artykułu. Strony z materiałami źródłowymi zostały sprawdzone 11 października 2026 r. Nasze zarejestrowane testy rozgrywki obejmują niewielką liczbę interakcji na komputerach stacjonarnych, a nie ukończenie wszystkich poziomów ani pełnego kursu mobilnego. Ten artykuł omawia sekwencję ćwiczeń; nie przyznaje kwalifikacji ani nie zastępuje testowania własnych interfejsów.

Gry, w które możesz grać na Cozcade

Flexbox FroggyGrid Garden