Cursus Webprogrammeren

Les 1 • Versiebeheer met Git Basics

Leert init, add, commit en push workflows voor het bijhouden van codewijzigingen. Zorgt ervoor dat studenten werk kunnen opslaan en herstellen vanaf het begin.

Les 2 • Je Code-Editor Instellen

Installeert en configureert een moderne code-editor met essentiële extensies. Maakt direct efficiënt coderen gedurende de cursus mogelijk.

Les 3 • Bestandssystemen en Projectstructuur

Legt maphiërarchieën, bestandsnaamconventies en relatieve versus absolute paden uit. Voorkomt kapotte links en ongeorganiseerde projecten.

Les 4 • De Browser Developer Tools Gebruiken

Introduceert de panelementen Elements, Console en Network voor het inspecteren van live pagina's. Bouwt debughabits die in elk later hoofdstuk worden gebruikt.

Les 1 • HTML-formulieren en Invoertypen

Bouwt formulieren met labels, inputs, selects, textareas en verzendknoppen. Legt de basis voor gebruikersgegevensverzameling die in latere hoofdstukken wordt behandeld.

Les 2 • Links, Afbeeldingen en Media

Legt ankertags, afbeeldingsattributen en embedded media-elementen uit. Verbindt pagina's en assets tot een samenhangend, doorzoekbaar document.

Les 3 • Lijsten, Tabellen en Gegevensstructuren

Leert geordende, ongeordende en definiërende lijsten plus toegankelijke tabelopmaak. Bereidt studenten voor om gestructureerde gegevens correct te presenteren.

Les 4 • HTML-documentanatomie

Breekt DOCTYPE-, head- en body-secties en hun vereiste metadata af. Stelt het skelet vast dat elk HTML-bestand in de cursus zal volgen.

Les 5 • Semantische HTML5-elementen

Introduceert header, nav, main, article, section, aside en footer-elementen. Verbetert toegankelijkheid en zoekmachine-interpretatie van pagina-inhoud.

Les 1 • Het CSS Box Model

Legt de lagen content, padding, border en margin uit en het gedrag van box-sizing. Lost de meest voorkomende lay-outverwarring op die beginners tegenkomen.

Les 2 • CSS-syntaxis en Selectors

Behandelt regelsets, declaraties, class-, ID- en elementselectors. Stelt het mechanisme vast voor alle stylingwerk dat voor ons ligt.

Les 3 • Achtergronden, Randen en Schaduwen

Past achtergrondafbeeldingen, gradiënten, randstijlen en boxschaduwen toe. Voegt visuele diepte en finishing touch toe aan paginacomponenten.

Les 4 • Kleuren, Typografie en Eenheden

Leert hex-, RGB- en HSL-kleurwaarden plus lettertype-eigenschappen en CSS-eenheden. Maakt consistente visuele ontwerpbeslissingen in een project mogelijk.

Les 1 • Positionering en Z-Index

Behandelt absolute, fixed en sticky positionering plus stacking context. Maakt overlays, sticky headers en modale dialogen mogelijk.

Les 2 • Responsief Ontwerp en Media Queries

Past breekpunten en flexibele eenheden toe om lay-outs aan te passen aan schermformaten. Produceert mobile-first ontwerpen die op elk apparaat werken.

Les 3 • CSS Grid-fundamenten

Definieert gridsjablonen, rijen, kolommen en gap-eigenschappen voor tweedimensionale lay-outs. Maakt complexe paginastructuren mogelijk die niet haalbaar zijn met alleen Flexbox.

Les 4 • Weergavemodi en Normale Stroom

Beoordeelt block-, inline- en inline-block-weergavewaarden en documentstroom. Biedt de basis die nodig is om te begrijpen wanneer Flexbox of Grid vereist is.

Les 1 • Loops en Iteratie

Leert voor-, terwijl- en voor...van-loops voor het herhalen van bewerkingen over gegevens. Bereidt studenten voor om arrays en verzamelingen efficiënt te verwerken.

Les 2 • Variabelen, Gegevenstypen en Operatoren

Introduceert let, const, primitieve typen en rekenkundige en vergelijkingsoperatoren. Legt de gegevensverwerkingsbasis voor alle JavaScript-code.

Les 3 • Arrays en Objecten

Behandelt arraymethoden en objectliteralen voor het opslaan en manipuleren van gestructureerde gegevens. Ondersteunt direct DOM-manipulatie en API-gegevensverwerking in latere hoofdstukken.

Les 4 • Functies en Scope

Definieert functiedeclaraties, -expressies, pijlfuncties en variabele scope. Maakt herbruikbare, modulaire codeblokken in een heel project mogelijk.

Les 1 • Event Delegatie en Propagatie

Legt bubbling, capturing en delegatiepatronen uit voor efficiënte event-afhandeling. Voorkomt geheugenlekken en vereenvoudigt dynamische lijstinteracties.

Les 2 • De DOM Selecteren en Doorlopen

Gebruikt querySelector, getElementById en ouder/kind doorloopmethoden. Maakt precieze targeting van elk element op een live pagina mogelijk.

Les 3 • DOM-knooppunten Maken en Verwijderen

Bouwt nieuwe elementen met createElement en voegt ze dynamisch in of verwijdert ze. Maakt lijstweergave, modal-creatie en dynamische UI-patronen mogelijk.

Les 4 • Elementen en Inhoud Wijzigen

Wijzigt tekst, HTML, attributen en CSS-klassen op geselecteerde elementen. Produceert zichtbare pagina-updates zonder de browser te herladen.

Les 1 • Promises en Chaining

Maakt en ketent Promises met .then() en .catch() voor sequentiële asynchrone taken. Vervangt geneste callbacks door leesbare, lineaire code.

Les 2 • API-gegevens naar de DOM Renderen

Wijst opgehaalde JSON-arrays toe aan dynamisch gegenereerde HTML-elementen. Voltooit de volledige data-fetch-to-display-pijplijn in een werkend project.

Les 3 • Gegevens Ophalen met de Fetch API

Verzendt GET- en POST-verzoeken naar REST API's en parseert JSON-reacties. Maakt real-time gegevensweergave van externe services mogelijk.

Les 4 • Async/Await Syntax

Herschrijft Promise-ketens met async-functies en await-expressies. Produceert schonere, synchroon ogende code voor complexe asynchrone workflows.

Les 1 • JavaScript-functies Implementeren

Voegt DOM-manipulatie, event-afhandeling en API-integratie toe aan het project. Transformeert de statische schil in een volledig interactieve applicatie.

Les 2 • Implementeren op een Live Host

Publiceert het voltooide project naar een statisch hostingplatform met Git-gebaseerde implementatie. Produceert een deelbare URL voor portfolio- en sollicitaties.

Les 3 • De Applicatie Testen en Debuggen

Gebruikt DevTools, console-logging en handmatige testcases om bugs te vinden en te repareren. Zorgt ervoor dat de app correct werkt vóór implementatie.

Les 4 • De HTML- en CSS-basis Bouwen

Construeert semantische opmaak en responsieve lay-out voor de applicatieschil. Past alle eerdere HTML- en CSS-vaardigheden toe in een uniforme codebase.