Stappen om een nieuw project te starten¶

Maak een nieuwe map aan op je computer, bijvoorbeeld mijn-project. Zorg ervoor dat deze niet in een cloud folder staat, zoals OneDrive.
Click recht bovenin op het bovenste icoontje, Explorer, om de file explorer te openen.
Open visual studio code en klik Open Folder of klik bovenin op File > Open Folder... en selecteer de map die je net hebt aangemaakt.
Hover over de mijn-project tab en klik op het file-icoontje met het plusteken om een nieuw bestand aan te maken. Noem dit bestand index.html.
Typ ! en druk op tab om een html template te genereren. Vul de titel in (bijvoorbeeld “Mijn Portfolio”) en sla het bestand op.
Hover over de mijn-project tab en klik op het file-icoontje met het plusteken om een nieuw bestand aan te maken. Noem dit bestand styles.css.
Voeg de CSS stylesheet toe aan je HTML. Plaats de volgende regel tussen de <head> tags in je index.html bestand:
```
<link rel="stylesheet" href="styles.css">
```
Naast het file icoontje met het plusteken, klik op het map-icoontje met het plusteken om een nieuwe map aan te maken. Noem deze map images. Hierin kun je al je afbeeldingen opslaan, die je in je website wilt gebruiken.

Je website bekijken¶

Er zijn meerdere manieren om je website te bekijken:

Optie 1: Direct in browser openen - Klik rechts op het index.html bestand in de Explorer - Kies “Reveal in File Explorer” - Dubbelklik op het bestand om het in je browser te openen - Vernieuw je browser met F5 om wijzigingen te zien

Optie 2: Simple Browser in VS Code - Open het index.html bestand - Druk op Ctrl+Shift+P (Windows/Linux) of Cmd+Shift+P (Mac) - Typ “Simple Browser: Show” en druk op Enter - Voer het pad in: index.html of het volledige bestandspad - Je website opent in een venster binnen VS Code

Optie 3: Live Server extensie (aanbevolen, vereist installatie) - Installeer eerst de “Live Server” extensie via de Extensions tab (Ctrl+Shift+X) - Klik rechts op het index.html bestand - Kies “Open with Live Server” - Je website opent automatisch in je browser en vernieuwt bij elke wijziging

Tip: Gebruik Ctrl+S (Windows) of Cmd+S (Mac) om je bestanden op te slaan. Vernieuw daarna je browser met F5 om de wijzigingen te zien.

Hoe ziet mijn code er nu uit?¶

Na het voltooien van dit stappenplan zou je index.html er ongeveer zo uit moeten zien:

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

</body>
</html>

En je styles.css bestand is leeg, maar staat klaar om te gebruiken.

Je project structuur ziet er zo uit:

mijn-project/
├── index.html
├── styles.css
└── images/

Klaar! Je kunt nu terug naar de professional skills om je content toe te voegen aan je website.

Last update: February 11, 2026