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

## Doel

Refactor het terrariumproject om **Flexbox** of **CSS Grid** te gebruiken voor de lay-out. Werk de HTML en CSS bij om een moderne, responsieve vormgeving te bereiken. Je hoeft geen sleepbare elementen te implementeren—richt je alleen op de lay-out en styling.

## Instructies

1. **Maak een nieuwe versie** van de terrarium-app. Werk de markup en CSS bij om Flexbox of CSS Grid te gebruiken voor de lay-out.
2. **Zorg ervoor dat de kunst en elementen op hun plaats zijn** zoals in de originele versie.
3. **Test je ontwerp** in minstens twee verschillende browsers (bijv. Chrome, Firefox, Edge).
4. **Maak screenshots** van je terrarium in elke browser om de compatibiliteit tussen browsers aan te tonen.
5. **Lever** je bijgewerkte code en screenshots in.

## Beoordelingscriteria

| Criteria   | Uitmuntend                                                               | Voldoende                             | Verbetering nodig                      |
|------------|--------------------------------------------------------------------------|---------------------------------------|----------------------------------------|
| Lay-out    | Volledig gerefactord met Flexbox of CSS Grid; visueel aantrekkelijk en responsief | Sommige elementen gerefactord; gedeeltelijk gebruik van Flexbox of Grid | Weinig of geen gebruik van Flexbox of Grid; lay-out ongewijzigd |
| Cross-Browser | Screenshots geleverd voor meerdere browsers; consistente weergave      | Screenshots voor één browser; kleine inconsistenties | Geen screenshots of grote inconsistenties |
| Codekwaliteit | Schone, goed georganiseerde HTML/CSS; duidelijke opmerkingen          | Enige organisatie; weinig opmerkingen | Ongeorganiseerde code; geen opmerkingen |

## Tips

- Bekijk de gidsen over [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) en [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
- Gebruik de ontwikkelaarstools van je browser om de responsiviteit te testen.
- Geef commentaar in je code voor duidelijkheid.

---

**Disclaimer**:  
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor cruciale informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.