You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
2.9 KiB
41 lines
2.9 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
"translation_date": "2025-10-03T10:06:29+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "fi"
|
|
}
|
|
-->
|
|
# CSS Refaktorointitehtävä
|
|
|
|
## Tavoite
|
|
|
|
Refaktoroi terrarium-projekti käyttämään **Flexboxia** tai **CSS Grid** -asettelua. Päivitä HTML ja CSS tarvittaessa modernin, responsiivisen suunnittelun saavuttamiseksi. Sinun ei tarvitse toteuttaa vedettäviä elementtejä—keskity vain asetteluun ja tyylittelyyn.
|
|
|
|
## Ohjeet
|
|
|
|
1. **Luo uusi versio** terrarium-sovelluksesta. Päivitä merkkauskieli ja CSS käyttämään Flexboxia tai CSS Grid -asettelua.
|
|
2. **Varmista, että taide ja elementit ovat paikoillaan** kuten alkuperäisessä versiossa.
|
|
3. **Testaa suunnittelusi** vähintään kahdessa eri selaimessa (esim. Chrome, Firefox, Edge).
|
|
4. **Ota kuvakaappauksia** terrariumistasi jokaisessa selaimessa osoittaaksesi selainten välisen yhteensopivuuden.
|
|
5. **Palauta** päivitetty koodi ja kuvakaappaukset.
|
|
|
|
## Arviointikriteerit
|
|
|
|
| Kriteeri | Erinomainen | Riittävä | Parannusta tarvitaan |
|
|
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
|
|
| Asettelu | Täysin refaktoroitu käyttäen Flexboxia tai CSS Gridia; visuaalisesti houkutteleva ja responsiivinen | Joitakin elementtejä refaktoroitu; osittainen Flexboxin tai Gridin käyttö | Vähän tai ei lainkaan Flexboxin tai Gridin käyttöä; asettelu muuttumaton |
|
|
| Selainten välinen yhteensopivuus | Kuvakaappaukset useista selaimista; yhtenäinen ulkoasu | Kuvakaappaukset yhdestä selaimesta; pieniä epäjohdonmukaisuuksia | Ei kuvakaappauksia tai suuria epäjohdonmukaisuuksia |
|
|
| Koodin laatu | Siisti, hyvin järjestetty HTML/CSS; selkeät kommentit | Jonkin verran järjestystä; vähän kommentteja | Sekava koodi; ei kommentteja |
|
|
|
|
## Vinkkejä
|
|
|
|
- Tutustu [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ja [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) oppaisiin.
|
|
- Käytä selaimen kehitystyökaluja testataksesi responsiivisuutta.
|
|
- Kommentoi koodisi selkeyden vuoksi.
|
|
|
|
---
|
|
|
|
**Vastuuvapauslauseke**:
|
|
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa 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ä. |