HTML, CSS en JS – Checklist

De meeste webprojecten zullen beginnen met dezelfde stappen. Op deze pagina vind je deze stappen overzichtelijk onder elkaar, zodat je een snel begin kunt maken.

Programma’s

Installeer (of update) Visual Studio Code en Chrome (of een alternatieve browser)
Installeer de volgende extensie in VSC: Live Server

Bestandsstructuur

Maak voor elk nieuw project een nieuwe map op je computer.
Klik op File > Open (mac) of File > Open Folder… (windows). Selecteer je map en klik op Open (mac) of Select Folder(windows).
Open nooit losse bestanden in VSC, maar altijd de volledige map van je project
Links in VSC is de Explorer zichtbaar (Zo niet: Klik op View > Explorer)
Rechtsklik in de Explorer en kies New File, maak op die manier index.html, style.css (en script.js als je met JavaScript gaat werken)
Als je met afbeeldingen gaat werken, maak dan een New Folder genaamd img

HTML

Open index.html, typ in de editor html:5 en druk op enter. Je ziet nu code verschijnen. Druk op tab totdat Document geselecteerd is. Vervang die tekst door Welkom! Druk nog een keer op tab, nu staat de cursor tussen en . Typ hier Hello World!

Maak een nieuwe regel voor </head>. Typ hier link:css en druk op enter. De koppeling met CSS is gemaakt.

Als je met JavaScript werkt: Maak een nieuwe regel voor </body>. Typ hier script:src en druk op enter. Typ nu script.js. De koppeling met JS is gemaakt.

Sla het bestand op met ⌘-S (mac) of Ctrl-S (windows).

CSS

Plak de volgende code in style.css:

/* CSS reset, dit niet aanpassen! */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
img {
  max-width: 100%;
  height: auto;
}

/* Hieronder mag je eigen CSS code */

Sla het bestand op met ⌘-S (mac) of Ctrl-S (windows).

Live Server

Rechtsklik in de Explorer op index.html en kies Open with Live Server. De pagina opent in je standaard browser.
Maak een wijziging in je HTML of CSS bestand en sla op. De browser wordt automatisch ververst, je hoeft de pagina niet opnieuw te openen.

Tip: Maak een kopie van dit mapje en bewaar het, zodat je altijd een project klaar hebt staan voor gebruik.