Docentenhandleiding
Praktische informatie voor docenten die deze cursus klassikaal willen inzetten — wat de site is, welke randvoorwaarden er zijn, en de volledige leerlijn.
Wij raden aan deze cursus parallel te gebruiken met de Web Development-cursus van Code.org. Engelstalig, gratis, met veel gestructureerde opdrachten — uitstekend om concepten extra in te slijpen of als alternatieve invalshoek naast onze PRIMM-lessen.
→ studio.code.org/courses/web-development-2026 — Unit 1
De HTML & CSS-pagina bevat een tabel die elke nuttige Code.org-les koppelt aan onze Nederlandse oefenpagina; op elke lespagina staat bovenaan ook een verwijzing naar de bijbehorende Code.org-les. Combineer naar smaak: een Code.org-opdracht voor extra oefening na bijvoorbeeld onze HTML-basis, of laat leerlingen de Cheatsheet gebruiken als ze bij Code.org iets vergeten zijn.
Wat is dit?
Een interactieve cursus HTML, CSS en JavaScript voor beginnende leerlingen die nog nooit een website hebben gemaakt. Doelgroep: onderbouw vo en hoger, of zelfstandige beginners.
Elke les is een korte pagina met theorie, een live-editor om te oefenen, en opdrachten met oplopende moeilijkheidsgraad. Geen passieve documentatie — leerlingen schrijven en draaien echte code in de browser, krijgen direct feedback, en lopen onderweg bewust tegen veelgemaakte fouten aan.
Technische randvoorwaarden
| Wat | Antwoord |
|---|---|
| Operating system | Alles met een moderne browser — Windows, macOS, Linux, Chromebook |
| Browser | Chrome, Firefox, Edge of Safari (laatste versie aanbevolen) |
| Installatie | Geen — alle lessen draaien direct in de browser |
| Account | Niet nodig voor de lessen; alleen voor het eindproject in de Online Editor |
| Internet | Vereist — de site is online |
Er is geen server-side onderdeel, geen login en geen registratie voor de lessen zelf. Een leerling kan de site openen, een les beginnen, en direct typen.
De editor in elke les
Bij elke les staat een interactieve CodeEditor met drie tabs:
index.html— de HTML van de oefeningstyle.css— de CSSscript.js— alleen zichtbaar in lessen die JavaScript gebruiken
Twee modi voor de preview:
- Live preview — typen werkt onmiddellijk door (HTML/CSS-lessen).
- ▶ Run-knop — leerling klikt om uit te voeren (JavaScript-lessen, zodat ze eerst kunnen denken/voorspellen).
Andere knoppen:
- Reset — terug naar de startcode. Handig als een leerling vastloopt.
- Console-paneel (alleen bij JS-lessen) — toont uitvoer van
console.log()en eventuele fouten.
De ingebouwde console toont alleen wat de code uitprint. Voor het opsporen van syntaxfouten kunnen leerlingen ook F12 indrukken om de browser-developer-tools te openen.
Didactische aanpak (PRIMM)
Elke les volgt hetzelfde vaste patroon — de PRIMM-methode — afgesloten met een fouten-sectie:
- Predict — De leerling voorspelt wat de getoonde code doet, vóórdat hij iets uitvoert.
- Run / Probeer het zelf — De leerling draait de code en kijkt of zijn voorspelling klopte.
- Investigate — Kleine, gerichte experimenten met de code ("verander X — wat zie je?").
- Modify — Een gerichte opdracht die voortbouwt op de bestaande code.
- Make — Een vrijere opdracht waarin de leerling zelf iets bouwt met het geleerde.
- Er gaat iets mis — De fouten die de leerling waarschijnlijk maakt, met uitleg.
Tips en antwoorden zijn verstopt in <details>-blokjes. Laat leerlingen eerst zelf proberen voordat ze openklikken.
Klassikaal gebruik & differentiatie
- Beamer + eigen laptop: bespreek de Predict-vraag plenair, leerlingen werken daarna zelf door.
- Snelle leerlingen kunnen vooruit op eigen tempo — de lessen zijn lineair maar elk zelfstandig te doen.
- Langzamere leerlingen mogen de Make-opdracht overslaan zonder dat de volgende les daarop bouwt.
- Beoordelen: laat leerlingen het eindproject maken in de Online Editor — zie Jouw eigen website voor projectideeën.
Leerlijn — HTML & CSS
De 17 lessen zijn gegroepeerd in vier didactische blokken. De volgorde in de sidebar volgt deze blokken.
Blok 1 — Basis HTML & CSS
| Onderwerp | Leerdoel |
|---|---|
| Intro HTML | Basisstructuur van een HTML-pagina |
| Koppen & lijsten | Inhoud structureren met koppen en lijsten |
| Tekst opmaken met CSS | CSS introduceren, tag-selector gebruiken |
| Eenheden in CSS | px, rem, em, % bewust kiezen |
| Afbeeldingen | Afbeeldingen + toegankelijkheid via alt |
| Pagina's koppelen | Navigatie en externe links |
Blok 2 — Layout & styling
| Onderwerp | Leerdoel |
|---|---|
| Ruimte rond elementen | Spacing en groeperen met padding, margin, <div> |
Display & <span> | Block, inline en inline-block begrijpen |
| CSS-klassen | Hergebruikbare styling met .klasse en #id |
| Pseudo-klassen | State- en positie-gebaseerde styling (:hover, :focus, ...) |
| Flexbox | Moderne layout-techniek voor 1-dimensionale layouts |
| Randen en afmetingen | Decoratie en formaat met border, width, box-sizing |
Blok 3 — Geavanceerde layout
| Onderwerp | Leerdoel |
|---|---|
| Position | Elementen positioneren met relative, absolute, fixed |
| Media queries | Responsief design met @media |
| CSS Grid | 2-dimensionale layouts |
Blok 4 — Semantiek & input
| Onderwerp | Leerdoel |
|---|---|
| Semantische HTML | Betekenisvolle structuur met <header>, <nav>, <main> |
| Formulieren | Gebruikersinvoer met <form>, <input>, <label> |
Leerlijn — JavaScript
De 16 JavaScript-lessen zijn gegroepeerd in vier blokken die op elkaar voortbouwen. Elke codeles heeft drie genummerde opdrachten van oplopende moeilijkheid, elk met een eigen oefenveld; de introductieles is een tekstpagina. Tot en met Variabelen is inline onclick de huisstijl; vanaf Events is dat addEventListener.
Blok 1 — De DOM aanraken
| Onderwerp | Leerdoel |
|---|---|
| Wat is JavaScript? | Conceptuele oriëntatie (HTML/CSS/JS-rollen) |
| Een knop die iets doet | Een element vinden via getElementById en het id |
| Tekst veranderen | Een eigenschap een nieuwe waarde geven met .textContent |
| Inline stijl | DOM-stijl aanpassen via .style (camelCase) |
Blok 2 — Code organiseren
| Onderwerp | Leerdoel |
|---|---|
| De script-tag | Code groeperen in functies; definiëren versus aanroepen |
| script.js | Extern bestand met defer; de console leren gebruiken |
| Variabelen | Toestand bewaren met let en const |
| Events | Benoemde functies koppelen met addEventListener |
Blok 3 — Waarden en beslissingen
| Onderwerp | Leerdoel |
|---|---|
| prompt & alert | Invoer vragen, zodat de waarden-lessen interactief zijn |
| Waarden en operatoren | Datatypes, rekenen, plakken en Number() |
| Vergelijken | Booleans, === en voorwaarden combineren met en/of |
| Beslissingen | Voorwaardelijk uitvoeren met if / else if / else |
Blok 4 — DOM, herhaling en data
| Onderwerp | Leerdoel |
|---|---|
| Modern DOM | querySelector en klassen schakelen met classList |
| Loops | Code herhalen met for en while |
| Arrays | Lijsten van waarden bewerken, samen met een loop |
| Formulier-data ophalen | Afsluiter: .value, Number() en if/else samen |
Cheatsheet & aanvullende pagina's
- Cheatsheet — beknopte naslag van alle HTML-tags, CSS-eigenschappen en JS-concepten met live-voorbeelden. Handig om open te hebben tijdens projectwerk.
- Jouw eigen website — eindopdracht-pagina met ~55 projectideeën, gegroepeerd op type (spelletjes, tools, persoonlijke sites...).
Feedback & bijdragen
Suggesties, fouten of nieuwe ideeën? Open een issue of pull request op GitHub. Alle bijdragen — van typo-correcties tot complete nieuwe lessen — zijn welkom.