<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-11T11:59:11+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "et"
}
-->
# CSS Refaktoreerimise Ülesanne

## Eesmärk

Refaktoreeri terrariumi projekt, kasutades paigutuseks **Flexboxi** või **CSS Grid'i**. Uuenda HTML-i ja CSS-i vastavalt, et saavutada kaasaegne ja responsiivne disain. Sa ei pea rakendama lohistatavaid elemente—keskendu ainult paigutusele ja stiilile.

## Juhised

1. **Loo uus versioon** terrariumi rakendusest. Uuenda märgistus ja CSS, et kasutada paigutuseks Flexboxi või CSS Grid'i.
2. **Veendu, et kunst ja elemendid oleksid paigas** nagu algses versioonis.
3. **Testi oma disaini** vähemalt kahes erinevas brauseris (nt Chrome, Firefox, Edge).
4. **Tee ekraanipildid** oma terrariumist igas brauseris, et näidata ühilduvust.
5. **Esita** oma uuendatud kood ja ekraanipildid.

## Hindamiskriteeriumid

| Kriteerium   | Näidiskvaliteet                                                        | Piisav                              | Vajab Parandamist                     |
|--------------|------------------------------------------------------------------------|-------------------------------------|---------------------------------------|
| Paigutus     | Täielikult refaktoreeritud, kasutades Flexboxi või CSS Grid'i; visuaalselt atraktiivne ja responsiivne | Mõned elemendid refaktoreeritud; osaline Flexboxi või Grid'i kasutamine | Vähe või üldse mitte Flexboxi või Grid'i kasutamist; paigutus muutmata |
| Brauseritevaheline ühilduvus | Ekraanipildid mitmest brauserist; ühtlane välimus       | Ekraanipildid ühest brauserist; väikesed erinevused | Puuduvad ekraanipildid või suured erinevused |
| Koodi kvaliteet | Puhas, hästi organiseeritud HTML/CSS; selged kommentaarid            | Mõningane organiseeritus; vähe kommentaare | Segane kood; kommentaarid puuduvad    |

## Näpunäited

- Vaata üle [Flexboxi juhend](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ja [CSS Grid'i juhend](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Kasuta brauseri arendustööriistu, et testida responsiivsust.
- Kommenteeri oma koodi selguse huvides.

---

**Lahtiütlus**:  
See dokument on tõlgitud AI tõlketeenuse [Co-op Translator](https://github.com/Azure/co-op-translator) abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.