Project 4: Semantische Portfolio - VHSI Webontwikkelingscursus

📋 Project Overzicht

Creëer een persoonlijke portfolio website die correct gebruik van semantische HTML-elementen demonstreert. Dit project richt zich op toegankelijkheid, SEO en schone codestructuur - niet alleen op hoe dingen eruitzien!

🎯 Waarom Dit Belangrijk Is

Dit project leert je verder te denken dan "hoe ziet het eruit" naar "wat betekent het". Dit is het verschil tussen een webdeveloper en een webdesigner.

✅ Vereisten

Structuur Vereisten

Je pagina MOET deze semantische elementen correct gebruiken:

<header> - Pagina header met logo en navigatie
<nav> - Hoofd navigatiemenu
<main> - Primair inhoudsgebied (slechts ÉÉN)
<article> - Elk portfolio project (zelfstandig)
<section> - Thematische inhoudsgroepen met koppen
<aside> - Sidebar met contactinfo of links
<footer> - Pagina footer met auteursrecht

Inhouds-onderdelen

Hero/Intro - Korte introductie (in header)
Over Mij - Je achtergrond sectie
Projecten Portfolio - Minstens 3 projectkaarten met <article>
Vaardigheden - Lijst je technische vaardigheden
Contact - Hoe je te bereiken

Toegankelijkheid Vereisten

Juiste kop hiërarchie (h1 voor hoofd titel, h2 voor secties)
Alt tekst voor alle afbeeldingen
Beschrijvende link tekst (geen "klik hier")
Logische tab volgorde
Voldoende kleurcontrast

Technische Vereisten

Externe CSS bestand
Responsive design (werkt op mobiel)
Geldige HTML5
Geen "div soep" - gebruik semantische elementen voor alle grote secties

📁 Template (Begin hiermee!)

HTML

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <nav>
            <!-- Navigatie hier -->
        </nav>
    </header>

    <main>
        <!-- Over sectie -->
        <section id="over">
            <h1>Jouw Naam</h1>
            <p>Jouw tagline...</p>
        </section>

        <section id="projecten">
            <h2>Mijn Projecten</h2>
            <article>
                <h3>Project 1</h3>
                <p>Beschrijving...</p>
            </article>
            <article>
                <h3>Project 2</h3>
                <p>Beschrijving...</p>
            </article>
        </section>

        <aside>
            <h2>Contact</h2>
            <!-- Contact info -->
        </aside>
    </main>

    <footer>
        <p>© 2024 Jouw Naam</p>
    </footer>

</body>
</html>

🔍 Semantische Checklist

Controleer elk item voordat je indient:

Element	Gebruikt?	Waar?
<header>	☐	_____
<nav>	☐	_____
<main>	☐	_____
<article>	☐	_____
<section>	☐	_____
<aside>	☐	_____
<footer>	☐	_____

Te Verdienen Badges

🏆 Semantisch Meester - Gebruik alle 7 hoofd-semantische elementen
♿ Toegankelijkheid Held - Slaat basise controle toegankelijkheid
🔍 SEO Pro - Juiste kop hiërarchie en meta tags

🚀 Klaar om te Bouwen?

Creëer een portfolio dat werkt voor iedereen - gebruikers, zoekmachines en ontwikkelaars!

← Terug naar Hoofdstuk 9