<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
  "translation_date": "2025-10-03T09:59:52+00:00",
  "source_file": "3-terrarium/2-intro-to-css/assignment.md",
  "language_code": "da"
}
-->
# CSS Refaktorering Opgave

## Formål

Refaktorer terrarium-projektet til at bruge **Flexbox** eller **CSS Grid** til layout. Opdater HTML og CSS efter behov for at opnå et moderne, responsivt design. Du behøver ikke implementere træk-og-slip-elementer—fokuser kun på layout og styling.

## Instruktioner

1. **Opret en ny version** af terrarium-appen. Opdater markeringen og CSS til at bruge Flexbox eller CSS Grid til layout.
2. **Sørg for, at kunst og elementer er på plads** som i den originale version.
3. **Test dit design** i mindst to forskellige browsere (f.eks. Chrome, Firefox, Edge).
4. **Tag skærmbilleder** af dit terrarium i hver browser for at demonstrere kompatibilitet på tværs af browsere.
5. **Indsend** din opdaterede kode og skærmbilleder.

## Bedømmelseskriterier

| Kriterier   | Fremragende                                                              | Tilstrækkelig                         | Kræver forbedring                      |
|-------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Layout      | Fuldt refaktoreret med Flexbox eller CSS Grid; visuelt tiltalende og responsivt | Nogle elementer refaktoreret; delvis brug af Flexbox eller Grid | Lille eller ingen brug af Flexbox eller Grid; layout uændret |
| Kompatibilitet | Skærmbilleder leveret for flere browsere; konsistent udseende          | Skærmbilleder for én browser; mindre uoverensstemmelser | Ingen skærmbilleder eller større uoverensstemmelser |
| Kvalitet af kode | Ren, velorganiseret HTML/CSS; klare kommentarer                     | Noget organisation; få kommentarer     | Uorganiseret kode; mangler kommentarer |

## Tips

- Gennemgå [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) og [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) vejledninger.
- Brug browserens udviklerværktøjer til at teste responsivitet.
- Kommenter din kode for klarhed.

---

**Ansvarsfraskrivelse**:  
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal det bemærkes, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.