Voorbereiding

1. Projectmappen aanmaken

Maak de volgende mappen en lege bestanden:

project/
├─ index.html
└─ assets/
   ├─ css/
   │  └─ custom.css    # eigen stijl (nu nog leeg)
   ├─ js/
   │  └─ main.js       # eigen scripts (nu nog leeg)
   └─ img/             # afbeeldingen (nu leeg)

2. VS Code & Live Server klaarzetten

  1. Open de map project/ in VS Code.
  2. Extensions → installeer Live Server (Ritwick Dey).
  3. Open index.html → klik rechtsonder op Go Live.

Er opent een tab zoals http://127.0.0.1:5500/. Elke opslaan refresht de pagina.

3. Minimale index.html (zonder Bootstrap)

Plak dit in index.html om Live Server te testen én je eigen CSS/JS te koppelen.

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mijn website — Stap 0</title>
    <link rel="stylesheet" href="assets/css/custom.css">
  </head>
  <body>
    <h1>Hallo, project klaar!</h1>
    <p>Dit is een minimale testpagina. Bootstrap komt in Stap 1.</p>

    <script src="assets/js/main.js"></script>
  </body>
</html>

4. Lege custom.css en main.js

Maak de bestanden aan (laat voorlopig leeg of zet een mini-test):

/* assets/css/custom.css */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
h1{ color: #333; }

// assets/js/main.js
console.log('Stap 0: project klaar.');
document.body.innerHTML += "
Hallo, dit is tekst via JavaScript!
";

Checklist

  • Mapstructuur bestaat en is open in VS Code.
  • Live Server draait en toont index.html.
  • custom.css en main.js zijn gelinkt en werken.