Opi CSS:ää pelien avulla: Flexbox Froggy ja Grid Garden

Aloita kurssilla Flexbox Froggy harjoitellaksesi linjausta akselin suuntaisesti ja käytä sitten kurssilla Grid Garden harjoitellaksesi kohteen sijoittamista ruudukkoviivojen väliin. Jokaisen peliharjoituksen jälkeen toista idea omalla pienellä sivullasi. Hyödyllinen tulos on kyky selittää, miksi määrittely toimii, kun asettelu muuttuu, sen sijaan, että muistaisit tietyn tason vastauksen.

Kuinka oppia CSS:ää pelien avulla ja sitten soveltaa sitä

Tämä reitti yhdistää kaksi peliä kolmeen alkuperäiseen harjoitukseen. Se sopii henkilölle, joka osaa lukea yksinkertaisen CSS-säännön ja haluaa näkyvää palautetta. Se ei ole täydellinen web-kehityskurssi: myös oikeat käyttöliittymät tarvitsevat luettavaa sisältöä, responsiivista toimintaa, näppäimistön käyttöä ja testausta eri tekstimäärillä.

Valitse oikea harjoitus kysymykseesi

Pelit ovat Codepipin luomia. Cozcade linkittää jokaisen isännöidyn pelin sen yhdistämisoppaaseen: Flexbox Froggy ja sen opas; Grid Garden ja sen opas. Alkuperäiset Froggy ja Grid Garden -sivut tarjoavat kirjoittajien omat versiot. Käytä näppäimistöä seuratessasi koodiharjoituksia täällä.

Nimeä ensin akseli ennen ominaisuuden valitsemista

Flexboxilla on pääakseli ja poikkiakseli. flex-direction asettaa pääsuunnan; justify-content sijoittaa kohteet pääakselin suuntaisesti, kun taas align-items koskee poikkiakselia. Normaalissa vasemmalta oikealle -rivissä pääakseli on vaakasuora. Muuta suunta sarakkeeksi, jolloin siitä tulee pystysuora. Näitä määritelmiä käsitellään MDN:n Flexbox-johdannossa.

Ennen kuin yrität määrittää Froggy-määritelmiä, kerro, mihin suuntaan haluat kohteiden liikkuvan. Nimeä sitten tämä suunta suhteessa nykyiseen pääakseliin. Tämä muuttaa väärän vastauksen tarkaksi kysymykseksi: valitsitko väärän ominaisuuden, väärän arvon vai väärän akselin?

Harjoitus 1: siirrä ryhmä loppuun

Luo kolme pientä kohdetta säilön sisään. Tämä on alkuperäinen harjoitus, ei kopioitu pelitaso tai vastausavain.

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

Tavoitteenasi on siirtää kolme kohdetta yhdessä kohti oikeaa reunaa muuttamatta niiden järjestystä tai antamatta jokaiselle esineelle erillistä marginaalia. Ennusta tulos ja lisää sitten justify-content: flex-end säiliöön.

Vertaa sitä nyt justify-content: space-between:aan. Ensimmäinen vaihtoehto siirtää ryhmää; toinen jakaa käytettävissä olevan tilan esineiden kesken. Kokeile kapeaa ja leveää säilöä. Selitä, minkä version valitsisit kolmelle painikkeelle, joiden tulisi pysyä lähellä toisiaan. Näkyvä tulos on tärkeämpi kuin yhden arvon muistaminen.

Harjoitus 2: säilytä sama käsky, muuta akselia

Käytä uudelleen kyseistä säilöä, lisää flex-direction: column, aseta height: 12rem ja säilytä justify-content: flex-end. Kohteet kerääntyvät nyt pohjalle. Määritelmästäsi ei tullut "siirrä oikealle" -komentoa: se toimii edelleen pääakselia pitkin, jota muutit.

Lisää seuraavaksi align-items: flex-start. Vertaa järjestelyä ennen lisäystä ja sen jälkeen. Määritetyllä vasemmalta oikealle -suunnassa kohteet tasautuvat vasemmalle poikkiakselilla. Poista määrittely ja tarkkaile oletusarvoista venytystoimintaa uudelleen.

Kirjoita lyhyt selitys molemmista muutoksista käyttämättä ilmaisua "se vain toimii". Esimerkiksi tunnista akseli, vapaa tila ja sijoitettava ryhmä. Jos et pysty selittämään tulosta, supista esimerkki kahteen kohtaan ja muuta vain yhtä määrittelyä kerrallaan. Tämä on tapa, joka kannattaa ottaa takaisin peliin.

Seuraavaksi erota ruudukkorata sen reunasta.

Ruudukon sijoittelussa käytetään rivejä ja sarakkeita ympäröiviä viivoja. Viidellä eksplisiittisellä sarakkeella on kuusi rajaviivaa. Sarakeriviltä 3 riville 5 sijoitettu esine ulottuu kahden sarakkeen, ei kolmen, yli. Katso MDN:n ruudukkoesittely raitojen, solujen ja viivojen eroista.

Lue Grid Garden:ssa alku- ja loppurajat ennen kuin yrität sijoittaa sijaintia. Piirrä tai nimeä rajat omalle sivullesi, jos tilojen laskeminen on hämmentävää.

Harjoitus 3: aseta kortti kahden rivin väliin

Rakenna viisisarakkeinen lauta ja anna sille yksi kortti:

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

Ennusta, mihin kortti tulee ennen sivun avaamista. Saat sen sitten kattamaan koko laudan muuttamalla vain sen sarakesijaintia. Yllä olevien viiden eksplisiittisen sarakkeen avulla grid-column: 1 / 6 ulottuu ensimmäisestä reunasta viimeiseen.

Lopuksi muuta teksti paljon pidemmäksi lauseeksi ja kavenna selainta. Sijoittelusääntö voi pysyä oikeana, kun taas kortin kiinteäkorkuinen esitystapa muuttuu sopimattomaksi sen sisällölle. Peliharjoituksen ratkaiseminen opettaa yhden osan asettelusta; käytettävän sivun rakentaminen vaatii myös sisällön tarkistamista.

Käytä pelin edistymistä palautteena, älä todisteena mestarillisuudesta

Onnistuneen harjoituksen jälkeen muuta yhtä oletusta: suuntaa, kohteiden määrää, käytettävissä olevaa leveyttä tai tekstin pituutta. Ennusta tulos ennen katsomista. Jos pystyt soveltamaan ideaa ja selittämään muutoksen, olet oppinut enemmän kuin vain yhden tasokkaan vastauksen.

Kun palaat peliin, tarkista, että avaat saman version ja selainympäristön. Cozcade-tilin suosikit osoittavat pelit, joita haluat pelata uudelleen; ne eivät ole takuu siitä, että pelin sisäinen oppituntien edistyminen siirtyy laitteiden välillä. Vältä tallennettujen sivustotietojen poistamista edistymisen tutkimisen aikana ja käytä nimenomaista vientitoimintoa vain, jos kyseinen peli tarjoaa sellaisen.

Jatka yhdistämisoppaan kanssa

Käytä Froggy-opasta akseli- ja kohdistusharjoitteluun ja Grid Garden-opasta sijoittelukysymyksiin. Jos haluat toisenlaista harjoittelua myöhemmin, selaa oppimispelejä.

Yllä olevat harjoitukset on kirjoitettu tätä artikkelia varten. Viitesivut tarkistettiin 11. lokakuuta 2026. Tallennetut pelikokemuksen tarkistukset kattavat pienen määrän työpöytäpelitoimintoja, eivätkä kaikkien tasojen suorittamista tai koko mobiilikurssia. Tämä artikkeli opettaa harjoitusjakson; se ei anna tutkintoa eikä korvaa omien käyttöliittymien testaamista.

Pelit, joita voit pelata Cozcade:lla

Flexbox FroggyGrid Garden