<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T10:09:10+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "nl"
}
-->
# HTML Oefenopdracht: Bouw een Blog Mockup

## Doel

Ontwerp en codeer handmatig de HTML-structuur voor een persoonlijke bloghomepage. Deze oefening helpt je bij het oefenen van semantische HTML, het plannen van lay-outs en het organiseren van code.

## Instructies

1. **Ontwerp je Blog Mockup**
   - Maak een visuele schets van je bloghomepage. Voeg belangrijke secties toe zoals de header, navigatie, hoofdinhoud, zijbalk en footer.
   - Je kunt papier gebruiken en je schets scannen, of digitale tools gebruiken (bijv. Figma, Adobe XD, Canva of zelfs PowerPoint).

2. **Identificeer HTML-elementen**
   - Maak een lijst van de HTML-elementen die je van plan bent te gebruiken voor elke sectie (bijv. `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`, `<section>`, `<h1>`–`<h6>`, `<p>`, `<img>`, `<ul>`, `<li>`, `<a>`, enz.).

3. **Schrijf de HTML-markup**
   - Codeer handmatig de HTML voor je mockup. Focus op semantische structuur en best practices.
   - Gebruik minimaal 10 verschillende HTML-elementen.
   - Voeg opmerkingen toe om je keuzes en structuur uit te leggen.

4. **Lever je werk in**
   - Upload je schets/mockup en je HTML-bestand.
   - Optioneel: geef een korte reflectie (2–3 zinnen) over je ontwerpkeuzes.

## Rubriek

| Criteria         | Uitmuntend                                                                                 | Voldoende                                                                       | Verbetering nodig                                                              |
|------------------|--------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------|--------------------------------------------------------------------------------|
| Visuele Mockup   | Duidelijke, gedetailleerde mockup met gelabelde secties en een doordachte lay-out          | Basis mockup met enkele gelabelde secties                                       | Minimale of onduidelijke mockup; mist sectielabels                             |
| HTML-elementen   | Gebruikt 10+ semantische HTML-elementen; toont begrip van structuur en best practices       | Gebruikt 5–9 HTML-elementen; enige semantische structuur                        | Gebruikt minder dan 5 elementen; mist semantische structuur                    |
| Codekwaliteit    | Goed georganiseerde, leesbare code met opmerkingen; volgt HTML-standaarden                 | Meestal georganiseerde code; weinig opmerkingen                                 | Ongeorganiseerde code; mist opmerkingen                                        |
| Reflectie        | Inzichtelijke reflectie op ontwerpkeuzes en uitdagingen                                    | Basisreflectie                                                                  | Geen reflectie of mist relevantie                                              |

## Tips

- Gebruik semantische HTML-tags voor betere toegankelijkheid en SEO.
- Organiseer je code met inspringingen en opmerkingen.
- Raadpleeg [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) voor hulp.
- Denk na over hoe je lay-out in toekomstige opdrachten kan worden uitgebreid of gestyled.

---

**Disclaimer**:  
Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we ons best doen voor 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.