Docentenhandleiding
Praktische informatie voor docenten die deze cursus klassikaal willen inzetten — wat de site is, welke randvoorwaarden er zijn, en de volledige leerlijn.
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.
Waar blijft het werk van je leerlingen?
Wat een leerling in een oefenveld typt, bewaart de browser zelf, in IndexedDB. Er gaat niets naar een server. Ververst de leerling de pagina of komt hij morgen terug, dan staat zijn code er nog. Naast de knoppen van het veld staat dan "Bewaard in deze browser".
Dat werk hoort bij één browser op één apparaat. Op een andere computer, in een andere browser of in een privévenster ziet de leerling de startcode. Het blijft bewaard tot iemand de sitegegevens wist, of tot de browser ruimte nodig heeft en de sites opruimt die het langst niet gebruikt zijn. Twee situaties waarin het sneller weg is:
- Safari wist opgeslagen sitegegevens van een site die je zeven dagen niet hebt bezocht, terwijl je Safari wel gebruikte.
- Schoolcomputers en Chromebooks die bij afmelden worden leeggemaakt, zijn na uitloggen alles kwijt. Dat is op school de meest voorkomende oorzaak.
Aan de opslagruimte ligt het niet. Een oefenveld is een paar kB. localStorage heeft een plafond van ongeveer 5 MB per site, en daarom gebruiken we het niet. IndexedDB krijgt een deel van de vrije schijfruimte. In Chrome en Edge is dat tot ruim de helft van de schijf per site, in recente versies van Safari ongeveer evenveel. Firefox geeft tot 10% van de schijf, met een maximum van 10 GB. Kan de browser toch niets bewaren, dan ziet de leerling in het veld de melding "Niet bewaard".
Voor werk dat echt niet weg mag, zoals een eindproject, is de Online Editor de betere plek. Daar kan een leerling zijn project met "Downloaden (.zip)" als bestand opslaan en inleveren.
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.
- Groter en Volledig scherm: Groter laat het oefenveld het browservenster vullen, Volledig scherm haalt ook de adresbalk en tabs weg. Escape gaat terug naar de les. Op een iPhone is alleen Groter er, omdat Safari daar geen volledig scherm voor een pagina-onderdeel kent.
- Console-paneel — toont uitvoer van
console.log()en eventuele fouten. In de HTML- en CSS-lessen staat hij dicht als balk onder het voorbeeld; hij klapt open met een klik of zodra er uitvoer is.
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: de leerling draait de code in het oefenveld onder "Probeer en onderzoek" en kijkt of zijn voorspelling klopte.
- Investigate: kleine, gerichte experimenten met de code ("verander X, wat zie je?"). Ze staan boven de code in datzelfde oefenveld, elk met een antwoord om uit te klappen, zodat de leerling niet tussen vraag en code hoeft te scrollen en zijn bevinding kan controleren.
- 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.
- Nakijken en mondeling: op Website checken voor docenten upload je het project van een leerling. Je ziet per concept uit de tabellen basis en gevorderd of het project het gebruikt, en bij een concept met onderdelen welke (
ul, li). Ook gebruikt toont de rest uit de lessen; dat telt niet mee voor het niveau. Onder Buiten de lesstof staat wat de leerling gebruikt dat de lessen niet behandelen, zoals een<canvas>, een@keyframesof een arrow-functie, met het bestand erbij. Dat is een goed begin van het mondeling: wie het zelf heeft uitgezocht, kan het uitleggen. - Leerdoelen en cijfer: Leerdoelen is het overzicht: per niveau een pagina met de concepten waarop je beoordeelt, per onderwerp in basis en gevorderd; deel die met je leerlingen. Niveau 1 is HTML en CSS, niveau 2 dezelfde concepten met JavaScript erbij. In de nakijker kies je het niveau bij Leerroute; een beoordeling die je bewaarde toen web nog één niveau had, opent op niveau 2. Onderaan staat Beoordelen met Bloom: hoe je er een cijfer van maakt, met de denkvaardigheid die je ziet (van onthouden tot creëren) en de moeilijkheid van de gebruikte concepten. De achtergrond staat bij vakdidactiek, in Denkvaardigheden volgens Bloom. In de nakijker kies je onder Cijfer de denkvaardigheid; de moeilijkheid stelt hij voor uit de toegepaste concepten. Klik op een moeilijkheid om hem vast te leggen, ook als je het voorstel overneemt: tot dan volgt het cijfer het voorstel. Het cijfer en de zin erbij komen in de PDF.
- Vragen voorbereiden: klik in het rapport op een concept of op iets buiten de lesstof, en de code van het project opent met die regels gemarkeerd; met Code bekijken open je elk bestand. Klik op een regelnummer (shift-klik voor een reeks) en markeer de regels als vraag, met de vraag die je wilt stellen. In het gesprek staan alle vragen onder Vragen voor het mondeling, met het stukje code erbij; per vraag klik je goed, deels of niet en typ je wat de leerling zei. Dat komt allemaal in de PDF.
- Meerdere mondelingen op een dag: elke upload wordt een beoordeling die blijft staan, met je opmerkingen erbij, ook als je de pagina sluit. Neem 's ochtends de mondelingen af, open 's middags een leerling uit Mijn beoordelingen, pas nog iets aan en maak dan de PDF; de naam van de leerling staat in de PDF en in de bestandsnaam. De beoordelingen staan alleen in de browser van die computer. Verwijder ze als je de PDF hebt, zeker op een gedeelde computer: het docentwachtwoord is niet geheim. Een beoordeling die 14 dagen niet is gewijzigd, verdwijnt vanzelf.
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.