<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T10:03:02+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "no"
}
-->
# CSS Refaktorering Oppgave

## Mål

Refaktorer terrarium-prosjektet til å bruke **Flexbox** eller **CSS Grid** for layout. Oppdater HTML og CSS etter behov for å oppnå et moderne, responsivt design. Du trenger ikke implementere dra-og-slipp-elementer—fokuser kun på layout og styling.

## Instruksjoner

1. **Lag en ny versjon** av terrarium-appen. Oppdater markeringen og CSS for å bruke Flexbox eller CSS Grid for layout.
2. **Sørg for at kunsten og elementene er på plass** som i den originale versjonen.
3. **Test designet ditt** i minst to forskjellige nettlesere (f.eks. Chrome, Firefox, Edge).
4. **Ta skjermbilder** av terrariet ditt i hver nettleser for å demonstrere kompatibilitet på tvers av nettlesere.
5. **Send inn** den oppdaterte koden og skjermbildene.

## Vurderingskriterier

| Kriterier   | Fremragende                                                              | Tilfredsstillende                     | Trenger forbedring                     |
|-------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Layout      | Fullstendig refaktorert med Flexbox eller CSS Grid; visuelt tiltalende og responsivt | Noen elementer refaktorert; delvis bruk av Flexbox eller Grid | Lite eller ingen bruk av Flexbox eller Grid; layout uendret |
| Kompatibilitet | Skjermbilder levert for flere nettlesere; konsistent utseende          | Skjermbilder for én nettleser; mindre inkonsekvenser | Ingen skjermbilder eller store inkonsekvenser |
| Kvalitet på kode | Ren, godt organisert HTML/CSS; tydelige kommentarer                  | Noe organisering; få kommentarer       | Uorganisert kode; mangler kommentarer  |

## Tips

- Se gjennom [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) og [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) guider.
- Bruk utviklerverktøy i nettleseren for å teste responsivitet.
- Kommenter koden din for klarhet.

---

**Ansvarsfraskrivelse**:  
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi tilstreber nøyaktighet, vennligst vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.