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
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 op editor.coderius.nl |
| 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 op editor.coderius.nl — 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 14 JavaScript-lessen zijn gegroepeerd in drie blokken die op elkaar voortbouwen.
Blok 1 — DOM-manipulatie
| Onderwerp | Leerdoel |
|---|---|
| Wat is JavaScript? | Conceptuele oriëntatie (HTML/CSS/JS-rollen) |
| Inline onclick | Tekst in de DOM aanpassen via getElementById |
| Inline stijl | DOM-stijl aanpassen via .style |
Blok 2 — Code organiseren
| Onderwerp | Leerdoel |
|---|---|
| De script-tag | Code groeperen in functies |
| script.js | Scheiding HTML en JS via extern bestand |
| Variabelen | Toestand bewaren met let en const |
| Events | Event-gedreven programmeren met addEventListener |
Blok 3 — Logica & data
| Onderwerp | Leerdoel |
|---|---|
| Waarden en operatoren | Werken met datatypes (number, string, boolean) |
| Beslissingen | Voorwaardelijk uitvoeren met if / else |
| Formulier-data ophalen | HTML en JS samenbrengen via .value |
| prompt & alert | Snelle input/output voor mini-demo's |
| Loops | Code herhalen met for en while |
| Arrays | Lijsten van waarden bewerken |
| Modern DOM | Schonere DOM-code met querySelector en classList |
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.