training
Advanced HTML and CSS
Moderne webontwikkeling met HTML, CSS en browser-API's
Beschrijving
Moderne webontwikkeling gaat al lang niet meer alleen over het bouwen van statische webpagina's. Frontenddevelopers bouwen tegenwoordig responsieve, interactieve en zeer dynamische webapplicaties met moderne HTML, geavanceerde CSS-mogelijkheden, browser-API's en testtools.
In deze cursus leer je professionele frontendtechnieken die gebruikt worden in moderne webapplicaties. Je werkt met semantische HTML, responsieve en toegankelijke layouts, schaalbare CSS-architecturen, browser-API's, realtime communicatie en geautomatiseerd testen.
De cursus combineert theorie met uitgebreide hands-on labs waarin je stapsgewijs een kleine webapplicatie ontwikkelt. Daarbij maak je kennis met moderne CSS-functionaliteit zoals Grid, Flexbox, container queries, animaties, preprocessors en utility-first frameworks zoals Tailwind. Daarnaast introduceert de cursus praktische browser-API's zoals Web Storage, fetch(), WebSockets en moderne frontend testtechnieken met Vitest en Playwright.
Deze training biedt een sterke basis voor professionele frontend webontwikkeling met moderne webstandaarden.
Leerdoelen
 Construct accessible and semantically correct webpages using modern HTML elements and forms | Apply  |
| Construct maintainable stylesheets using selectors and variables | Apply |
| Construct interactive interfaces using pseudo-classes and pseudo-elements | Apply |
| Explain how browsers calculate element dimensions and positioning using the CSS box model | Understand  |
| Construct responsive and well-structured layouts using modern CSS positioning techniques | Apply |
| Implement reusable and maintainable styling patterns using Sass/SCSS features | Apply |
| Construct responsive user interfaces using modern CSS responsiveness techniques such as media queries and container queries | Apply |
| Implement smooth and performant UI animations using modern CSS animation techniques | Apply |
| Implement responsive and maintainable user interfaces using a CSS framework | Apply |
| Implement maintainable styling solutions using CSS architecture techniques and utility-first CSS principles | Apply |
| Implement client-side data persistence using browser storage APIs | Apply |
Implement communication between frontend and backend services using the fetch() API | Apply |
| Implement realtime communication using WebSocket-based communication | Apply |
| Implement unit, integration and end-to-end tests using tools such as Vitest and Playwright | Apply |
Benodigde voorkennis
Basiskennis van HTML en CSS, daarmee hoe webpagina's worden gestructureerd, vormgegeven en gerenderd in de browser.
Onderwerpen
HTML
In deze module verdiep je je in semantische HTML en moderne browser-native elementen voor het bouwen van toegankelijke, gestructureerde en onderhoudbare webpagina's.
Lessen
- Semantische en sectionele elementen
- Definition lists en figures
- Media-elementen zoals audio en video
- SVG en canvas
- Dialogs en templates
- Moderne formelementen en validatie
- Strategieën voor het laden van scripts en DOM-interactie
Lab: Bouw semantische webpagina's
Lab: Bouw gevalideerde formulieren
Lab: Implementeer modale dialogs en herbruikbare templates
Na het afronden van deze module kunnen deelnemers:
- Webpagina's structureren met semantische HTML
- Moderne HTML-elementen correct toepassen
- Toegankelijke formulieren bouwen met ingebouwde validatie
- Werken met browser-native templatingfunctionaliteit
CSS basis
In deze module leer je de basis van moderne CSS-stylingtechnieken en selectors.
Lessen
- Selectors en specificiteit
- Attribute selectors
- Logische selectors zoals
:not(),:has()en:is() - Kleuren, typografie en custom fonts
- CSS custom properties (variabelen)
- CSS nesting
Lab: Style webpagina's en formulieren
Lab: Pas selectors en herbruikbare stylingtechnieken toe
Na het afronden van deze module kunnen deelnemers:
- CSS-selectors effectief toepassen
- Specificiteit en selectorvoorrang begrijpen
- Werken met CSS-variabelen en geneste styling
- Onderhoudbare stylesheets schrijven
CSS pseudo-classes en pseudo-elements
In deze module leer je hoe je interactieve toestanden en delen van elementen kunt stylen.
Lessen
- Pseudo-classes zoals
:hover,:focus,:validen:invalid - Structurele pseudo-classes zoals
:nth-child()en:first-of-type - Pseudo-elements zoals
::before,::afteren::backdrop - Styling van validatiestatussen van formulieren
Lab: Voeg hover- en focuseffecten toe
Lab: Style validatiestatussen van formulieren
Na het afronden van deze module kunnen deelnemers:
- Interactieve toestanden van elementen stylen
- Pseudo-elements gebruiken voor visuele uitbreidingen
- Formuliergebruiksvriendelijkheid en feedback verbeteren
- Geavanceerde structurele selectors toepassen
CSS box model
In deze module onderzoek je hoe browsers elementen renderen en afmetingen berekenen op een webpagina.
Lessen
- Block- en inline-elementen
- Margin, padding en borders
- Breedte- en hoogteberekeningen
box-sizing- Omgaan met overflow en sizingproblemen
Na het afronden van deze module kunnen deelnemers:
- Het CSS box model begrijpen
- Elementen correct schalen en uitlijnen
- Veelvoorkomende layoutproblemen voorkomen
border-boxsizing effectief toepassen
CSS positioning
In deze module leer je moderne layout- en positioneringstechnieken voor het bouwen van responsieve interfaces.
Lessen
- Flexbox
- CSS Grid en subgrid
- Absolute en relative positioning
- Anchor positioning
- Layoutstrategieën en afwegingen tussen positioneringstechnieken
Lab: Positioneer navigatiemenu's
Lab: Bouw responsieve card-layouts
Lab: Positioneer formulieren en contextmenu's
Na het afronden van deze module kunnen deelnemers:
- Layouts bouwen met Flexbox en Grid
- Geschikte positioneringstechnieken kiezen
- Gestructureerde en responsieve layouts maken
- Interactieve UI-elementen effectief positioneren
CSS preprocessors
In deze module maak je kennis met preprocessors voor het verbeteren van onderhoudbaarheid en schaalbaarheid van CSS.
Lessen
- Introductie tot Sass/SCSS
- Geneste styling
- Variabelen en operaties
- Mixins en herbruikbare stijlen
- Integratie met buildtools
Lab: Converteer CSS naar SCSS
Lab: Hergebruik en organiseer stijlen met Sass
Na het afronden van deze module kunnen deelnemers:
- Sass-functionaliteit gebruiken om CSS-ontwikkeling te vereenvoudigen
- Herbruikbare stijlen efficiënt organiseren
- Preprocessors integreren in een frontendworkflow
- De rol van buildtools begrijpen
CSS responsiveness
In deze module leer je technieken voor het bouwen van responsieve en adaptieve gebruikersinterfaces.
Lessen
- Responsieve units (
rem,em,vh,vw) - Media queries
- Container queries
- Responsieve layouts
- Accessibility-overwegingen bij responsiveness
Lab: Maak webpagina's mobielvriendelijk
Lab: Bouw responsieve card-layouts
Lab: Implementeer een hamburgermenu
Na het afronden van deze module kunnen deelnemers:
- Responsieve gebruikersinterfaces bouwen
- Media en container queries effectief toepassen
- Geschikte CSS-units kiezen
- Toegankelijkheid verbeteren op verschillende apparaten
CSS animations en transitions
In deze module leer je hoe je vloeiende en performante animaties maakt voor webapplicaties.
Lessen
- CSS transitions
- Keyframe animations
- Timing functions en easing
- View transitions
- Performance-overwegingen en GPU-acceleratie
Lab: Voeg transitions en animaties toe aan de applicatie
Na het afronden van deze module kunnen deelnemers:
- Animaties maken met CSS
- Vloeiende transitions toepassen op UI-interacties
- Performance-overwegingen bij animaties begrijpen
- Moderne browsermogelijkheden voor animaties gebruiken
CSS organization
In deze module leer je strategieën voor het organiseren en schalen van CSS binnen grotere applicaties.
Lessen
- CSS-architectuurbenaderingen
- BEM-methodologie
- Scoped CSS
- Tailwind CSS
- Utility-first CSS-concepten
- Vergelijken van CSS-organisatiestrategieën
Lab: Style pagina's met Tailwind CSS
Lab: Bouw responsieve layouts met utility classes
Na het afronden van deze module kunnen deelnemers:
- CSS organiseren voor betere onderhoudbaarheid
- Veelgebruikte CSS-architectuurpatronen begrijpen
- Werken met utility-first CSS-frameworks
- Schaalbare stylingstrategieën toepassen
Web API: Storage
In deze module leer je hoe browsers data lokaal kunnen opslaan.
Lessen
- Local Storage
- Session Storage
- JSON serialisatie en deserialisatie
- Introductie tot IndexedDB
Lab: Sla applicatiedata op en lees deze uit
Lab: Persisteer data lokaal
Na het afronden van deze module kunnen deelnemers:
- Data opslaan in de browser
- Werken met JSON in JavaScript
- Browsermogelijkheden voor opslag begrijpen
- Geschikte opslagtechnieken kiezen
Web API: fetch
In deze module leer je hoe webapplicaties communiceren met backendservices.
Lessen
fetch()gebruiken voor HTTP-requests- GET-, POST- en DELETE-requests
- Werken met JSON-API's
- Error handling
- Loading indicators en gebruikersfeedback
Lab: Bouw een kleine backend met json-server
Lab: Haal data op en sla deze op met fetch()
Lab: Implementeer loading- en errorstates
Na het afronden van deze module kunnen deelnemers:
- Communiceren met backendservices
fetch()effectief gebruiken- Werken met asynchrone operaties
- Gebruiksvriendelijkheid verbeteren tijdens netwerkoperaties
Realtime communicatie
In deze module leer je hoe moderne webapplicaties realtime functionaliteit implementeren.
Lessen
- Polling en long polling
- WebSockets
- Introductie tot WebRTC en Server-Sent Events
- Patronen voor realtime communicatie
Lab: Bouw een WebSocket-server
Lab: Synchroniseer updates tussen browsertabs
Lab: Werk de UI realtime bij
Na het afronden van deze module kunnen deelnemers:
- Technieken voor realtime communicatie begrijpen
- Werken met WebSockets
- Realtime updates implementeren in webapplicaties
- Werken met de lifecycle van WebSockets
Introductie tot testen
In deze module maak je kennis met moderne frontend testtools en teststrategieën.
Lessen
- Unit-, integratie- en end-to-endtesten
- Vitest
- Playwright
- Mocking en test doubles
- Testen van gebruikersinteracties en toegankelijkheid
Lab: Maak integratietesten met Vitest
Lab: Maak end-to-endtesten met Playwright
Na het afronden van deze module kunnen deelnemers:
- Frontend teststrategieën begrijpen
- Geautomatiseerde testen schrijven voor webapplicaties
- Gebruikersinteracties en browsergedrag testen
- Moderne frontend testtools gebruiken
Planning
| Startdatum | Duur | Locatie | |
|---|---|---|---|
20 juli 202621 juli 2026 | 2 dagen | Veenendaal / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Veenendaal / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie | Inschrijven |
17 augustus 202618 augustus 2026 | 2 dagen | Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Utrecht / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie | Inschrijven |
21 september 202622 september 2026 | 2 dagen | Veenendaal / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie Veenendaal / Remote Dit is een hybride training die remote gevolgd kan worden. Meer informatie | Inschrijven |
Incompany of persoonlijk advies nodig?
Onze opleidingsadviseurs denken graag met je mee om een persoonlijk advies te geven of een incompany training binnen jouw organisatie te vinden.
Trainers
Voorkennis trainingen
Vervolgtrainingen
"Zeer prettige docent, gaf op een eigen manier een zeer goede invulling aan de cursus. Was prettig om zo de cursus te volgen."Marieke
-
Hoge waardering
-
Praktijkgerichte trainingen
-
Gecertificeerde trainers
-
Eigen docenten