Cursus Front-end Development

Les 1 • Je ontwikkelomgeving instellen

Installeert en configureert een code-editor, terminal en browserontwikkeltools. Zorgt ervoor dat elke student een identieke, productieve basis heeft voordat er code wordt geschreven.

Les 2 • Versiebeheer met Git

Introduceert Git-concepten en dagelijkse workflows voor het bijhouden van codewijzigingen. Bereidt studenten voor om samen te werken en fouten te herstellen gedurende de cursus.

Les 3 • Inleiding tot de opdrachtregel

Leert navigatie, bestandsmanipulatie en het uitvoeren van scripts via de terminal. Stelt studenten in staat om buildtools en pakketbeheerders te gebruiken die in latere hoofdstukken worden geïntroduceerd.

Les 1 • Semantische HTML5-elementen

Introduceert landmark-elementen zoals header, nav, main, article, section en footer. Verbetert de toegankelijkheid en machineleesbaarheid van paginacontent.

Les 2 • Basisbeginselen van toegankelijkheid in HTML

Past ARIA-rollen, alt-tekst en toetsenbordnavigeerbare opmaak toe op HTML-documenten. Zorgt ervoor dat alle projecten vanaf het begin voldoen aan de basisnormen voor toegankelijkheid.

Les 3 • HTML-formulieren en invoertypen

Bouwt interactieve formulieren met labels, invoervelden, keuzelijsten en knoppen met de juiste toegankelijkheidsattributen. Bereidt studenten voor op formuliervalidatie en verwerking van inzendingen in JavaScript-hoofdstukken.

Les 4 • Kern-HTML-elementen

Behandelt koppen, alinea's, lijsten, links en afbeeldingen als de primaire inhoudsbouwstenen. Legt correct elementgebruik vast voordat semantische wrappers worden geïntroduceerd.

Les 1 • Positionering en weergavemodi

Leert static, relative, absolute, fixed en sticky positionering naast weergavewaarden. Maakt precieze plaatsing van elementen mogelijk voordat moderne lay-outsystemen worden geïntroduceerd.

Les 2 • CSS-specificiteit en overerving

Lost stijlconflicten op met specificiteitsregels, de cascade en overgeërfde eigenschappen. Voorkomt debugfrustratie in grotere stylesheets die in latere hoofdstukken worden gebouwd.

Les 3 • CSS-syntaxis en selectors

Behandelt regelsets, eigenschap-waardeparen en selectortypen van element tot attribuut. Bouwt de selectornauwkeurigheid die nodig is voor al het verdere stylingwerk.

Les 4 • Het Box Model in detail

Legt content, padding, border en margin uit als de vier lagen van elk element. Lost veelvoorkomende spacing-bugs op door box-sizing en margin collapse te leren.

Les 1 • Geavanceerde CSS Grid-technieken

Gebruikt auto-fill, auto-fit en subgrid om adaptieve, contentgestuurde lay-outs te maken. Rondt de lay-outbeheersing af voordat studenten overgaan op JavaScript-interactiviteit.

Les 2 • Flexbox-grondbeginselen

Introduceert het flex-container- en flex-item-model met asgebaseerde uitlijning. Lost veelvoorkomende eendimensionale lay-outproblemen op, zoals navigatiebalken en kaartrijen.

Les 3 • Geavanceerde Flexbox-patronen

Past flex-wrap, order en align-self toe om complexe componentlay-outs te bouwen. Bereidt studenten voor om voor elk ontwerpscenario te kiezen tussen Flexbox en Grid.

Les 4 • CSS Grid-grondbeginselen

Definieert grid-tracks, -gebieden en plaatsingsregels voor tweedimensionale lay-outs. Stelt studenten in staat om tijdschrift- en dashboardpagina's te bouwen.

Les 1 • Operators en control flow

Past rekenkundige, vergelijkings- en logische operators toe in conditionals en lussen. Stelt studenten in staat om besluitvormende en repetitieve logica in hun scripts te schrijven.

Les 2 • Functies en scope

Definieert herbruikbare logica met functiedeclaraties, functie-expressies en pijlfuncties. Legt lexicale scope en closures uit als de basis voor modulaire code.

Les 3 • Arrays en objecten

Slaat collecties op en manipuleert ze met arraymethoden en objectliterals. Bereidt studenten voor om te werken met API-gegevensstructuren in latere hoofdstukken.

Les 4 • JavaScript-syntaxis en datatypen

Behandelt variabelen gedeclareerd met let en const, primitieve typen en type coercion. Legt de taalregels vast die al het daaropvolgende JavaScript gedragen.

Les 1 • DOM-elementen wijzigen

Wijzigt tekstinhoud, attributen, stijlen en klasselijsten op geselecteerde elementen. Maakt dynamische UI-updates mogelijk zonder volledige paginalaadtijden.

Les 2 • De DOM selecteren en doorlopen

Gebruikt querySelector, getElementById en doorloop-eigenschappen om elementen te lokaliseren. Koppelt JavaScript aan de HTML-structuur die in eerdere hoofdstukken is gebouwd.

Les 3 • Formulieren en verwerking van gebruikersinvoer

Leest formulierwaarden, voorkomt standaardinzending en valideert invoer in realtime. Overbrugt HTML-formulierstructuur met JavaScript-gestuurde interactiviteit.

Les 4 • Elementen maken en verwijderen

Bouwt nieuwe nodes met createElement en voegt ze toe aan of verwijdert ze uit de DOM-boom. Ondersteunt dynamische lijstweergave en componentcreatiepatronen.

Les 1 • Promises en Promise-kettingen

Maakt Promises aan en koppelt ze met .then(), .catch() en .finally() voor sequentiële asynchrone logica. Bereidt studenten voor op de schonere async/await-syntaxis die hierna wordt geïntroduceerd.

Les 2 • Gegevens ophalen met de Fetch API

Verstuurt GET- en POST-verzoeken, parseert JSON-antwoorden en handelt HTTP-fouten af. Verbindt asynchrone vaardigheden met echte gegevensbronnen die studenten in projecten zullen gebruiken.

Les 3 • Asynchrone programmeerconcepten

Legt de call stack, event loop en callback-patroon uit als de basis van asynchroon gedrag. Lost veelvoorkomende misverstanden over het single-threaded uitvoeringsmodel van JavaScript op.

Les 4 • API-gegevens weergeven in de DOM

Toont opgehaalde gegevens dynamisch, beheert laadindicatoren en toont foutmeldingen. Produceert complete datagestuurde UI-functionaliteit die klaar is voor portfolio-projecten.

Les 1 • Componentgebaseerde UI-frameworks

Introduceert het componentmodel, props en state met behulp van een populair front-end-framework. Verplaatst studenten van imperatieve DOM-manipulatie naar declaratieve UI-rendering.

Les 2 • Een front-end-applicatie implementeren

Bouwt en implementeert een productie-SPA op een statisch hostingplatform met CI/CD-pijplijnen. Voltooit de volledige ontwikkelingscyclus van lokale code naar live URL.

Les 3 • Statebeheerpatronen

Beheert gedeelde applicatiestatus met context, stores of het optillen van state. Bereidt studenten voor om gegevensstroom in complexe applicaties met meerdere componenten te ontwerpen.

Les 4 • ES-modules en pakketbeheer

Organiseert code met import/export-syntaxis en beheert afhankelijkheden met een pakketbeheerder. Legt de modulaire architectuur vast die door alle moderne front-end-frameworks wordt gebruikt.

Les 5 • Routering in single-page-applicaties

Implementeert client-side routering om tussen weergaven te navigeren zonder volledige paginalaadtijden. Stelt studenten in staat om multi-view SPAs te bouwen met URL-gestuurde navigatie.