Învață CSS cu jocuri: Flexbox Froggy și Grid Garden

Începeți cu Flexbox Froggy pentru a exersa alinierea de-a lungul unei axe, apoi folosiți Grid Garden pentru a exersa plasarea unui element între liniile grilei. După fiecare exercițiu de joc, reproduceți ideea într-o pagină mică. Un rezultat util este posibilitatea de a explica de ce o declarație funcționează atunci când aspectul se schimbă, în loc să vă amintiți răspunsul unui anumit nivel.

Cum să învățați CSS cu jocuri, apoi să îl aplicați

Această rută combină două jocuri cu trei exerciții originale. Se potrivește cuiva care poate citi o regulă CSS simplă și dorește feedback vizibil. Nu este un curs complet de dezvoltare web: interfețele reale au nevoie și de conținut lizibil, comportament responsiv, acces de la tastatură și testare cu diferite cantități de text.

Alegeți exercițiul potrivit pentru întrebarea dvs.

Jocurile sunt create de Codepip. Cozcade leagă fiecare joc găzduit de ghidul său corespunzător: Flexbox Froggy și ghidul său; Grid Garden și ghidul său. Paginile originale Froggy și Grid Garden oferă propriile versiuni ale autorilor. Folosiți o tastatură atunci când urmați exercițiile de cod de aici.

Mai întâi, denumiți axa înainte de a alege o proprietate

Flexbox are o axă principală și o axă transversală. flex-direction setează direcția principală; justify-content poziționează elementele de-a lungul acelei axe principale, în timp ce align-items se referă la axa transversală. Într-un rând normal de la stânga la dreapta, axa principală este orizontală. Schimbați direcția într-o coloană și aceasta devine verticală. Aceste definiții sunt acoperite în Introducerea Flexbox de la MDN.

Înainte de a încerca declarații în Froggy, spuneți în ce direcție doriți să se miște elementele. Apoi denumiți acea direcție în raport cu axa principală curentă. Aceasta transformă un răspuns greșit într-o întrebare specifică: ați ales proprietatea greșită, valoarea greșită sau axa greșită?

Exercițiul 1: mutați un grup la sfârșit

Creați trei elemente mici în interiorul unui container. Acesta este un exercițiu original, nu un nivel de joc sau o cheie de răspuns copiată.

<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;
}

Scopul dvs. este să mutați cele trei elemente împreună spre marginea din dreapta, fără a le schimba ordinea sau a da fiecărui element o margine separată. Prevedeți rezultatul, apoi adăugați justify-content: flex-end în container.

Acum comparați-l cu justify-content: space-between. Prima opțiune mută grupul; a doua distribuie spațiul disponibil între elemente. Încercați un container îngust și unul lat. Explicați ce versiune ați alege pentru trei butoane care ar trebui să rămână apropiate. Rezultatul vizibil contează mai mult decât amintirea unei valori.

Exercițiul 2: păstrați aceeași instrucțiune, schimbați axa

Reutilizați containerul respectiv, adăugați flex-direction: column, setați height: 12rem și păstrați justify-content: flex-end. Elementele se adună acum spre partea de jos. Declarația dvs. nu a devenit o comandă „mutare la dreapta”: funcționează în continuare de-a lungul axei principale, pe care ați modificat-o.

Apoi, adăugați align-items: flex-start. Comparați aranjamentul înainte și după această adăugare. Cu direcția specificată de la stânga la dreapta, elementele se aliniază spre stânga pe axa transversală. Eliminați declarația și observați din nou comportamentul implicit de întindere.

Scrieți o scurtă explicație a ambelor modificări fără a utiliza „pur și simplu funcționează”. De exemplu, identificați axa, spațiul liber și grupul care este poziționat. Dacă nu puteți explica un rezultat, reduceți exemplul la două elemente și schimbați doar o declarație odată. Acesta este obiceiul de reluat în joc.

În continuare, distingeți o pistă de grilă de limita sa

Plasarea în grilă folosește linii care înconjoară rândurile și coloanele. Cinci coloane explicite au șase linii de delimitare. Un element plasat de la linia 3 la linia 5 se întinde pe două coloane, nu pe trei. Consultați Introducerea în grilă a MDN pentru distincția dintre piste, celule și linii.

În Grid Garden, citiți limitele de început și de sfârșit înainte de a încerca o poziție. Pe propria pagină, desenați sau etichetați limitele dacă numărarea spațiilor este confuză.

Exercițiul 3: plasați o carte între două linii

Construiți o tablă cu cinci coloane și dați-i o carte:

<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;
}

Prevedeți unde va apărea cartela înainte de a deschide pagina. Apoi, faceți-o să se întindă pe întreaga tablă, schimbând doar plasarea coloanelor. Cu cele cinci coloane explicite de mai sus, grid-column: 1 / 6 se întinde de la prima limită până la ultima.

În final, schimbați textul într-o propoziție mult mai lungă și faceți browserul mai restrâns. Regula de plasare poate rămâne corectă în timp ce prezentarea cu înălțime fixă ​​a cartelei devine nepotrivită pentru conținutul său. Rezolvarea unui exercițiu de joc predă o parte a aspectului; construirea unei pagini utilizabile necesită verificarea și a conținutului.

Folosiți progresul jocului ca feedback, nu ca dovadă a stăpânirii

După un exercițiu reușit, schimbați o presupunere: direcția, numărul de elemente, lățimea disponibilă sau lungimea textului. Prezice rezultatul înainte de a analiza. Dacă poți adapta ideea și explica schimbarea, ai învățat mai mult decât un răspuns de nivel.

Când revii la un joc, verifică dacă deschizi aceeași versiune și același mediu de browser. Favoritele contului Cozcade identifică jocurile pe care dorești să le revezi; acestea nu reprezintă o promisiune că progresul intern al lecției unui joc se transferă între dispozitive. Evită ștergerea datelor stocate pe site în timp ce investighezi progresul și folosește o funcție de export explicită numai dacă jocul respectiv oferă una.

Continuă cu ghidul de potrivire

Folosește ghidul Froggy pentru exersarea axelor și a alinierii și ghidul Grid Garden pentru întrebări de plasare. Dacă dorești un alt tip de exersare ulterior, răsfoiește jocurile de învățare.

Exercițiile de mai sus au fost scrise pentru acest articol. Paginile de referință au fost verificate pe 11 octombrie 2026. Verificările noastre înregistrate ale jocului acoperă un număr mic de interacțiuni pe desktop, nu finalizarea tuturor nivelurilor sau a unui curs complet pe mobil. Acest articol predă o secvență de practică; nu acordă o calificare și nu înlocuiește testarea propriilor interfețe.

Jocuri pe care le poți juca pe Cozcade

Flexbox FroggyGrid Garden