Hoe een webproject opzetten in VS Code

Volg dit vaste stappenplan bij elk project. We werken altijd binnen een projectmap, gebruiken een vaste mappenstructuur, en testen met Live Server.

1. De standaard mappenstructuur

Maak bij elk nieuw project deze structuur. Niet afwijken.

projectnaam/
 ├── index.html                ← startpagina
 ├── assets/                   ← ondersteunende bestanden
 │    ├── styles/              ← CSS
 │    │     └── style.css
 │    ├── images/              ← afbeeldingen/iconen
 │    │     └── logo.png
 │    ├── scripts/             ← JavaScript (later)
 │    │     └── app.js
 │    └── fonts/               ← webfonts (optioneel)
 │          └── roboto.woff2
 └── paginas/                  ← extra HTML-pagina’s
       ├── over-ons.html
       └── contact.html

Visuele mappenstructuur

Zo hoort je project eruit te zien in de Explorer van VS Code:

📁 projectnaam
 ├── 📄 index.html
 ├── 📁 assets
 │    ├── 📁 styles
 │    │     └── 📄 style.css
 │    ├── 📁 images
 │    │     └── 📄 logo.png
 │    ├── 📁 scripts
 │    │     └── 📄 app.js
 │    └── 📁 fonts
 │          └── 📄 roboto.woff2
 └── 📁 paginas
      ├── 📄 over-ons.html
      └── 📄 contact.html