7.4 KiB

Raw Blame History

CSS Refaktorointitehtävä

Tavoite

Muuta terrarium-projektisi käyttämään moderneja CSS-asettelutekniikoita! Refaktoroi nykyinen absoluuttinen sijoittelu ja ota käyttöön Flexbox tai CSS Grid, jotta saat aikaan helpommin ylläpidettävän ja responsiivisen suunnittelun. Tämä tehtävä haastaa sinut soveltamaan moderneja CSS-standardeja samalla säilyttäen terrariumin visuaalisen houkuttelevuuden.

Ymmärrys siitä, milloin ja miten käyttää erilaisia asettelumenetelmiä, on olennainen taito nykyaikaisessa web-kehityksessä. Tämä harjoitus yhdistää perinteiset sijoittelutekniikat nykyaikaisiin CSS-asettelujärjestelmiin.

Tehtävän ohjeet

Vaihe 1: Analyysi ja suunnittelu

Tarkista nykyinen terrarium-koodisi - Tunnista, mitkä elementit käyttävät tällä hetkellä absoluuttista sijoittelua
Valitse asettelumenetelmäsi - Päätä, sopiiko Flexbox vai CSS Grid paremmin suunnittelutavoitteisiisi
Piirrä uusi asettelurakenteesi - Suunnittele, miten kontit ja kasvielementit järjestetään

Vaihe 2: Toteutus

Luo uusi versio terrarium-projektistasi erilliseen kansioon
Päivitä HTML-rakenne tukemaan valitsemaasi asettelumenetelmää
Refaktoroi CSS käyttämään Flexboxia tai CSS Gridia absoluuttisen sijoittelun sijaan
Säilytä visuaalinen johdonmukaisuus - Varmista, että kasvit ja terrarium-purkki näkyvät samoissa paikoissa
Toteuta responsiivinen toiminta - Asettelusi tulisi mukautua sulavasti eri näyttökokoihin

Vaihe 3: Testaus ja dokumentointi

Selaintestaus - Varmista, että suunnittelusi toimii Chromessa, Firefoxissa, Edgessä ja Safarissa
Responsiivinen testaus - Tarkista asettelusi mobiili-, tabletti- ja työpöytänäytöillä
Dokumentointi - Lisää CSS:ään kommentteja, jotka selittävät asetteluratkaisusi
Näyttökuvat - Tallenna terrariumisi eri selaimissa ja näyttökokoisina

Teknisiä vaatimuksia

Asettelun toteutus

Valitse YKSI: Toteuta joko Flexbox TAI CSS Grid (ei molempia samoille elementeille)
Responsiivinen suunnittelu: Käytä suhteellisia yksiköitä (rem, em, %, vw, vh) kiinteiden pikselien sijaan
Saavutettavuus: Säilytä oikea semanttinen HTML-rakenne ja alt-tekstit
Koodin laatu: Käytä johdonmukaisia nimeämiskäytäntöjä ja järjestä CSS loogisesti

Modernit CSS-ominaisuudet

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

Selaintuen vaatimukset

Chrome/Edge: Viimeiset 2 versiota
Firefox: Viimeiset 2 versiota
Safari: Viimeiset 2 versiota
Mobiiliselaimet: iOS Safari, Chrome Mobile

Toimitettavat materiaalit

Päivitetty HTML-tiedosto, jossa on parannettu semanttinen rakenne
Refaktoroitu CSS-tiedosto, joka käyttää moderneja asettelutekniikoita
Näyttökuvakokoelma, joka osoittaa selainten yhteensopivuuden:
- Työpöytänäkymä (1920x1080)
- Tablettinäkymä (768x1024)
- Mobiilinäkymä (375x667)
- Vähintään 2 eri selainta
README.md-tiedosto, jossa dokumentoidaan:
- Valitsemasi asettelutapa (Flexbox vs Grid) ja perustelut
- Haasteet, joita kohtasit refaktoroinnin aikana
- Huomioita selainten yhteensopivuudesta
- Ohjeet koodin suorittamiseen

Arviointikriteerit

Kriteeri	Erinomainen (4)	Hyvä (3)	Kehittyvä (2)	Alkuvaiheessa (1)
Asettelun toteutus	Mestarinomainen Flexbox/Grid-käyttö edistyneillä ominaisuuksilla; täysin responsiivinen	Oikea toteutus hyvällä responsiivisella toiminnalla	Perustoteutus pienillä responsiivisilla ongelmilla	Epätäydellinen tai virheellinen asettelutoteutus
Koodin laatu	Siisti, hyvin järjestetty CSS merkityksellisillä kommenteilla ja johdonmukaisilla nimillä	Hyvä järjestys ja joitakin kommentteja	Riittävä järjestys vähäisillä kommenteilla	Huono järjestys; vaikea ymmärtää
Selainten yhteensopivuus	Täydellinen johdonmukaisuus kaikissa vaadituissa selaimissa näyttökuvien kera	Hyvä yhteensopivuus pienillä eroilla, jotka on dokumentoitu	Joitakin yhteensopivuusongelmia, jotka eivät riko toiminnallisuutta	Merkittäviä yhteensopivuusongelmia tai puuttuva testaus
Responsiivinen suunnittelu	Erinomainen mobiililähtöinen lähestymistapa sujuvilla taukokohdilla	Hyvä responsiivinen toiminta sopivilla taukokohdilla	Perusresponsiiviset ominaisuudet joillakin asetteluongelmilla	Rajoitettu tai rikkinäinen responsiivinen toiminta
Dokumentointi	Kattava README, jossa yksityiskohtaiset selitykset ja oivallukset	Hyvä dokumentointi, joka kattaa kaikki vaaditut elementit	Perusdokumentointi vähäisillä selityksillä	Epätäydellinen tai puuttuva dokumentointi

Hyödyllisiä resursseja

Asettelumenetelmäoppaat

📖 Täydellinen opas Flexboxiin
📖 Täydellinen opas CSS Gridiin
📖 Flexbox vs Grid - Valitse oikea työkalu

Selaintestaustyökalut

Koodin laatutyökalut

Lisähaasteet

🌟 Edistyneet asettelut: Toteuta sekä Flexbox että Grid eri osissa suunnittelua
🌟 Animaatioiden integrointi: Lisää CSS-siirtymiä tai animaatioita, jotka toimivat uuden asettelusi kanssa
🌟 Tumma tila: Toteuta CSS:n mukautettuihin ominaisuuksiin perustuva teemanvaihtaja
🌟 Konttikyselyt: Käytä moderneja konttikyselytekniikoita komponenttitasoiseen responsiivisuuteen

💡 Muista: Tavoitteena ei ole vain saada toimiva lopputulos, vaan ymmärtää, MIKSI valitsemasi asettelumenetelmä on paras ratkaisu juuri tähän suunnittelutehtävään!

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

7.4 KiB Raw Blame History