msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c6eb20fcc1'
${ noResults }
Web-Dev-For-Beginners/translations/nl/3-terrarium/1-intro-to-html/assignment.md

4.0 KiB
Raw Blame History Escape

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 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. 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.