# HTML Oefenopdracht: Maak een Blog Mockup ## Leerdoelen Pas je HTML-kennis toe door een complete blog homepage te ontwerpen en te coderen. Deze praktische opdracht versterkt je begrip van semantische HTML-concepten, toegankelijkheidsrichtlijnen en professionele code-organisatievaardigheden die je gedurende je webontwikkelingsreis zult gebruiken. **Door deze opdracht te voltooien, leer je:** - Het plannen van website-indelingen voordat je begint met coderen - Het correct toepassen van semantische HTML-elementen - Het maken van toegankelijke, goed gestructureerde markup - Het ontwikkelen van professionele codeer-gewoontes met behulp van commentaar en organisatie ## Projectvereisten ### Deel 1: Ontwerpplanning (Visuele Mockup) **Maak een visuele mockup van je blog homepage die het volgende bevat:** - Header met sitetitel en navigatie - Hoofdinhoud met minimaal 2-3 blogpost previews - Zijbalk met aanvullende informatie (over-sectie, recente berichten, categorieën) - Footer met contactinformatie of links **Opties voor het maken van een mockup:** - **Handgetekende schets**: Gebruik papier en potlood, maak vervolgens een foto of scan je ontwerp - **Digitale tools**: Figma, Adobe XD, Canva, PowerPoint of een andere tekenapplicatie - **Wireframe tools**: Balsamiq, MockFlow of vergelijkbare wireframing software **Label de secties van je mockup** met de HTML-elementen die je van plan bent te gebruiken (bijv. "Header - `

`", "Blogposts - `

`"). ### Deel 2: HTML Elementen Planning **Maak een lijst waarin elke sectie van je mockup wordt gekoppeld aan specifieke HTML-elementen:** ``` Example: - Site Header →

- Main Navigation →