Ga naar hoofdinhoud

Webontwikkeling met VS Code

In deze tutorial leer je hoe je websites bouwt met HTML, CSS en JavaScript in VS Code.

Voorbereiding​

Zorg dat je het volgende hebt geïnstalleerd:

Stap 1: Live Server extension installeren​

Met de extension Live Server kun je je website live bekijken in de browser terwijl je codeert.

  1. Klik in de linkerbalk op het blokjes-icoon (Extensions)
  2. Typ bovenaan in het zoekveld: Live Server
  3. Zoek het resultaat van Ritwick Dey
  4. Klik op de blauwe Install knop
  5. Wacht tot de installatie klaar is — er verschijnt een tandwiel-icoon in plaats van de Install knop

Stap 2: Een projectmap aanmaken​

  1. Maak een nieuwe map aan op je computer, bijvoorbeeld mijn-website
  2. Open deze map in VS Code via File → Open Folder...

Stap 3: Je eerste HTML-bestand​

  1. Klik met de rechtermuisknop in de Explorer (het linker paneel)
  2. Kies New File...
  3. Noem het bestand index.html
  4. Typ het volgende:
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn eerste website</title>
</head>
<body>
    <h1>Hallo wereld!</h1>
    <p>Dit is mijn eerste website.</p>
</body>
</html>
  1. Sla het bestand op via File → Save

Tip: Typ ! en druk op Tab in een leeg .html bestand. VS Code vult automatisch de basis HTML-structuur voor je in!

Stap 4: Bekijk je website​

  1. Klik met de rechtermuisknop op index.html in de Explorer
  2. Kies Open with Live Server
  3. Je browser opent automatisch en toont je website
  4. Elke keer als je een bestand opslaat, wordt de pagina automatisch ververst

Stap 5: CSS toevoegen​

Met CSS kun je het uiterlijk van je website aanpassen (kleuren, lettertype, afstanden, etc.).

  1. Maak een nieuw bestand aan: klik rechts in de Explorer → New File... → noem het style.css
  2. Typ het volgende:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}
  1. Sla het bestand op
  2. Open index.html en voeg de volgende regel toe in de <head>, onder de <title>:
<link rel="stylesheet" href="style.css">
  1. Sla index.html op — je ziet de veranderingen direct in de browser

Stap 6: JavaScript toevoegen​

Met JavaScript kun je je website interactief maken.

  1. Maak een nieuw bestand aan: klik rechts in de Explorer → New File... → noem het script.js
  2. Typ het volgende:
let knop = document.getElementById("mijnKnop");

knop.addEventListener("click", function() {
    alert("Je hebt op de knop geklikt!");
});
  1. Sla het bestand op
  2. Open index.html en voeg een knop toe in de <body>:
<button id="mijnKnop">Klik hier</button>
  1. Voeg het script toe net voor de sluitende </body> tag:
<script src="script.js"></script>
  1. Sla index.html op en klik op de knop in je browser

Het resultaat​

Na alle stappen ziet je index.html er zo uit:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn eerste website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hallo wereld!</h1>
    <p>Dit is mijn eerste website.</p>
    <button id="mijnKnop">Klik hier</button>
    <script src="script.js"></script>
</body>
</html>

En je projectmap ziet er zo uit:

mijn-website/
├── index.html
├── style.css
└── script.js

Volgende stap​