Frontend
In deze reeks staat de gebruikerskant centraal: opbouw van interfaces, componentstructuur, interactiepatronen en toegankelijke UX-keuzes. De kaartjes helpen je om schermen te bouwen die niet alleen mooi ogen, maar ook logisch aanvoelen en soepel reageren op gebruikersinput.
Meta data
AA
Frontend
Metadata
Metadata is data over data: het beschrijft en geeft context aan andere data. In webontwikkeling omvat dit HTML-metatags in de <head>, HTTP-headers, structured data (Schema.org), Open Graph-tags en EXIF-gegevens van bestanden. Goede metadata verbetert SEO, toegankelijkheid en de weergave op social media en in zoekresultaten.
AA
Frontend
Above the Fold
AA
Frontend
Above the Fold
Above the fold is de content die een bezoeker ziet zonder te scrollen zodra de pagina laadt. De term komt uit de krantenwereld, waar het belangrijkste nieuws boven de vouw van de krant staat. In webdesign is dit gebied cruciaal: bezoekers beslissen in seconden of ze blijven. Zet hier je belangrijkste informatie, een duidelijke kop en een primaire call-to-action. Houd rekening met verschillende schermformaten, want de fold ligt voor iedereen anders.
AA
Frontend
ES6
AA
Frontend
ECMAScript 6
ES6 (ES2015) bracht een grote set moderne features: arrow functions, classes, modules (import/export), template literals, destructuring, de spread-operator, promises, let/const en default parameters. Sindsdien volgen jaarlijkse updates. Voor oudere browsers transpile je naar ES5 met Babel.
AA
Frontend
Progressive Enhancement
AAA
Frontend
Progressive Enhancement
Progressive enhancement begint met een solide basis die overal werkt. Eerst lever je content met HTML, daarna presentatie met CSS en vervolgens interactie met JavaScript. Zo krijgt iedereen toegang, met extra's voor moderne browsers.
AAA
Frontend
LocalStorage
AA
Frontend
LocalStorage
LocalStorage is een web storage-API voor permanente key-valueopslag (strings, ~5-10 MB) zonder einddatum. Data blijft staan na het sluiten van de browser en is per origin. De API is synchroon (setItem/getItem/removeItem) en biedt geen encryptie. Gebruik het voor voorkeuren en cache, voor meer capaciteit is IndexedDB beter.
AA
Frontend
Viewport
A
Frontend
Viewport
De viewport is het zichtbare gebied van de browser-pagina. De viewport-metatag vertelt de browser hoe de pagina geschaald wordt op mobiele apparaten, met als standaardwaarden width=device-width en initial-scale=1. Zonder deze tag zoomt een mobiele browser uit op de desktopbreedte. De CSS-viewport-units vw, vh, vmin en vmax zijn gebaseerd op de viewport-afmetingen.
A
Frontend
Cookie
A
Frontend
Cookie
Een cookie is een klein tekstbestand (max. 4 KB) dat de browser per domein opslaat om gegevens te onthouden. Het gaat automatisch mee met HTTP-requests naar dat domein. Toepassingen zijn sessies, personalisatie en tracking. Belangrijke attributen: expiry, domain, path, secure, HttpOnly en SameSite.
A
Frontend
Flexbox
A
Frontend
Flexible Box Layout
Flexbox is een ééndimensionaal layout-systeem voor het verdelen van ruimte en het positioneren langs de hoofdas. Belangrijke properties zijn justify-content, align-items, flex-direction en flex-wrap. Het is ideaal voor responsive componenten, navigatiebalken en card-layouts.
A
Frontend
UTF-8
A
Frontend
UTF-8 tekencodering
UTF-8 is de dominante tekencodering voor het web en kan elk Unicode-teken weergeven. Stel het in via de charset-metatag in de HTML-head en via HTTP Content-Type-headers. Zonder correcte encoding kunnen speciale tekens, emoji's en niet-latijnse scripts verkeerd worden weergegeven. UTF-8 is achterwaarts compatibel met ASCII.
A
Frontend
AJAX
AA
Frontend
Asynchronous JavaScript and XML
AJAX is een techniek voor asynchrone data-uitwisseling tussen browser en server, zonder volledige page reload. Hoewel 'XML' in de naam staat, wordt meestal JSON gebruikt. Tegenwoordig gebruik je vooral de Fetch API of Axios. XMLHttpRequest was de oorspronkelijke (nu legacy) implementatie.
AA
Frontend
Meta Tags
A
Frontend
Meta Tags
Meta-tags zijn HTML-tags in de <head> met metadata over de pagina. Ze zijn niet zichtbaar voor gebruikers, maar wel voor bots en browsers. Je gebruikt ze voor SEO (description), social sharing (Open Graph, Twitter Cards), viewport, charset, author en robots. De title is essentieel voor SEO.
A
Frontend
Shadow root
AAA
Frontend
Shadow root
Een shadow root is het rootknooppunt van een shadow DOM-boom, aangemaakt via de attachShadow()-methode met mode 'open' of 'closed'. In open mode is de shadow root toegankelijk via JavaScript — in closed mode niet. De shadow root encapsuleert markup en styles zodat ze niet lekken naar of vanuit de rest van het document.
AAA
Frontend
Mobile First
A
Frontend
Mobile First
Bij mobile-first ontwerp je eerst voor mobiele apparaten en schaal je daarna op naar grotere schermen. Deze aanpak dwingt focus op essentiële content en functionaliteit. Het resultaat is betere performance en een consistente gebruikerservaring.
A
Frontend
Vue.js
AA
Frontend
Vue JavaScript Framework
Vue is een flexibel framework dat je stap voor stap kunt gebruiken. Het combineert sterke punten van React (virtual DOM, components) en Angular (templates, directives). De leercurve is mild en de documentatie uitstekend. Single File Components (.vue) zijn een kernfeature.
AA
Frontend
CTA
A
Frontend
Call To Action
Een call-to-action is een visueel element, zoals een knop of link, dat aanzet tot actie. Voorbeelden zijn 'Koop nu', 'Schrijf je in' of 'Download gratis'. Effectieve CTA's zijn opvallend, actiegericht en strategisch geplaatst.
A
Frontend
Design System
AA
Frontend
Design System
Een design system is een collectie van herbruikbare UI-componenten, stijlgidsen en tokens zoals kleur, typografie en spacing. Het zorgt ervoor dat alles er hetzelfde uitziet en makkelijk uitgebreid kan worden en wordt ondersteund met documentatie. Voorbeelden zijn Material Design en Lightning Design System.
AA
Frontend
Axios
AA
Frontend
Axios JavaScript HTTP Client
Axios is een populaire JavaScript-library voor het doen van HTTP-requests in browsers en Node.js. Het biedt een schone, promise-based API met features als automatische JSON-serialisatie, request/response-interceptors, timeout-handling en global request-configuratie. Het is een veelgebruikt alternatief voor de Fetch API.
AA
Frontend
Cross-browser Compatibility
AA
Frontend
Cross-browser Compatibility
Cross-browser compatibiliteit betekent dat je site hetzelfde werkt in verschillende browsers en versies. Om cross-browser compatibiliteit te waarborgen, is het belangrijk om uitgebreid te testen, webstandaarden te volgen en waar nodig polyfills of specifieke fixes toe te passen voor ontbrekende features.
AA
Frontend
Tailwind CSS
AA
Frontend
Tailwind Cascading Style Sheets
Tailwind is een utility-first CSS-framework waarbij je classes zoals 'flex', 'pt-4' en 'text-center' direct in HTML gebruikt. Het is eenvoudig aan te passen via een configbestand en verwijdert ongebruikte CSS met tree-shaking. Het levert snelle ontwikkeling op, maar maakt de HTML voller.
AA
Frontend
Responsive Design
A
Frontend
Responsive Design
Responsive design zorgt dat een website zich vloeiend aanpast aan verschillende schermformaten. Dit doe je met flexibele grids, media queries en relatieve units zoals %, em en rem. Zo werkt één codebase op desktop, tablet en mobiel.
A
Frontend
Angular
AA
Frontend
Angular Framework
Angular is een uitgebreid framework van Google, gebouwd op TypeScript. Het biedt dependency injection, forms, routing en een HTTP-client. De leercurve is steiler, maar de structuur is geschikt voor complexe enterprise-apps. Angular (2+) is de herschreven opvolger van AngularJS.
AA
Frontend
Custom Elements
AAA
Frontend
Custom Elements
Met de web components-API definieer je eigen HTML-tags, zoals <user-card>. Je gebruikt speciale functies (connectedCallback, attributeChangedCallback) en maakt je eigen element customElements.define(). Combineer dit met Shadow DOM voor afschermen en hergebruik zonder framework.
AAA
Frontend
Bootstrap
A
Frontend
Bootstrap CSS Framework
Bootstrap is een populair CSS-framework met een responsive grid, kant-en-klare componenten (buttons, cards, modals, navbars) en JavaScript-plugins. Het is mobile-first en aanpasbaar via Sass-variabelen. Ideaal voor snelle prototypes en consistente designs zonder diepe CSS-kennis.
A
Frontend
Preprocessor
AA
Frontend
CSS-preprocessor / code-preprocessor
Een preprocessor is een tool die een uitgebreide syntax omzet naar standaard CSS of JavaScript. CSS-preprocessors zoals SASS en SCSS voegen variabelen, nesting, mixins, functies en imports toe aan CSS. JavaScript-preprocessors zoals TypeScript en Babel voegen typing of moderne syntaxis toe die worden gecompileerd naar browser-compatibele code.
AA
Frontend
Atomic Design
AAA
Frontend
Atomic Design
Atomic Design splitst de UI op in atoms, molecules, organisms, templates en pagina's. Deze hiërarchie bevordert hergebruik, consistentie en modulair denken bij component-gedreven development.
AAA
Frontend
Svelte
AAA
Frontend
Svelte JavaScript Framework
Svelte is een innovatief framework dat op compile-time werkt. Er is geen virtual DOM: frameworkcode verdwijnt in de build-stap. Dit levert kleine bundles en een snelle runtime op. Componenten combineren HTML, CSS en JS in .svelte-bestanden. SvelteKit lijkt qua rol op Next.js.
AAA
Frontend
jQuery
A
Frontend
JavaScript Query Library
jQuery is een library die DOM-manipulatie, events, animaties en AJAX vereenvoudigt met goede cross-browser compatibiliteit. Het gebruik nam af door modern JavaScript en frameworks, maar blijft aanwezig in legacy-projecten en eenvoudige sites. Iconisch is de $()-selectorsyntax.
A
Frontend
Media Query
A
Frontend
Media Query
Met media queries pas je styles voorwaardelijk toe op basis van eigenschappen als schermbreedte, -hoogte, oriëntatie of resolutie. Het is de kern van responsive design. Voorbeeld: @media (min-width: 768px) { ... }.
A
Frontend
User agent
AAA
Frontend
User agent string
Een user agent is een string die de browser meestuurt in de HTTP-header User-Agent, met informatie over de browser, versie, het besturingssysteem en soms het apparaat. Servers en scripts gebruiken de user agent voor browser-detectie, statistieken en het serveren van geschikte content. User agent sniffing is echter fragiel — feature detection verdient de voorkeur.
AAA
Frontend
React
AA
Frontend
React JavaScript Library
React is een component-gebaseerde JavaScript-library voor interactieve UIs. Het gebruikt een virtuele DOM voor efficiënte updates, JSX (JS + XML) en hooks voor state en lifecycle. Het ecosysteem is uitgebreid (React Router, Redux, Next.js) en React is dominant voor SPAs.
AA
Frontend
Accessibility
A
Frontend
Web Accessibility (A11y)
Toegankelijkheid betekent dat websites voor iedereen bruikbaar zijn, ook voor mensen met een beperking. Je volgt hierbij de WCAG-richtlijnen. Denk aan semantische HTML, toetsenbord-navigatie, voldoende kleurcontrast, alt-teksten en goede screenreader-ondersteuning.
A
Frontend
Container Queries
AAA
Frontend
CSS Container Queries
Container queries passen styles toe op basis van de grootte van de parent-container in plaats van de viewport. Dit maakt écht component-gedreven, responsieve componenten mogelijk. Voorbeeld: @container (min-width: 400px) { ... }. Vereist een container-type op de parent.
AAA
Frontend
Graceful Degradation
AAA
Frontend
Graceful Degradation
Graceful degradation werkt omgekeerd aan progressive enhancement. Je start met volledige moderne functionaliteit en zorgt vervolgens dat de site bruikbaar blijft als functies ontbreken. Oudere browsers krijgen zo een vereenvoudigde maar werkbare ervaring.
AAA
Frontend
Grid
A
Frontend
CSS Grid Layout
CSS Grid is een tweedimensionaal layoutsysteem voor complexe ontwerpen met rijen en kolommen. Je definieert grids met grid-template-columns/rows en plaatst items met grid-area. Grid is geschikt voor paginalayouts en wordt vaak gecombineerd met Flexbox.
A
Frontend
DOM
A
Frontend
Document Object Model
De DOM is de boomstructuur die de browser van een HTML-document maakt, waarbij elk element een node is. JavaScript kan de DOM manipuleren met bijvoorbeeld getElementById, querySelector en appendChild. Dit triggert reflow/repaint en kost performance. Een virtual DOM (zoals in React) optimaliseert dit.
A
Frontend
Semantic HTML
A
Frontend
Semantic HTML
Semantische HTML gebruikt elementen volgens hun betekenis, zoals <article>, <nav>, <header> en <section>, in plaats van generieke <div>-tags. Dit verbetert toegankelijkheid, SEO en de leesbaarheid van de code.
A
Frontend
Landing Page
A
Frontend
Landing Page
Een landingpage is een aparte pagina waar bezoekers terechtkomen na bijvoorbeeld een advertentie of e-maillink. De pagina is geoptimaliseerd voor één duidelijk doel, met een gerichte boodschap, minimale afleiding en een sterke call-to-action.
A
Frontend
Crawlers
AA
Frontend
Webcrawlers / spiders
Een webcrawler (ook spider of bot) is een geautomatiseerd programma dat systematisch het web doorloopt door links te volgen en pagina's te ontdekken en te indexeren. Zoekmachines zoals Google gebruiken crawlers om content te vinden voor zoekresultaten. Je stuurt crawlers via robots.txt (toestaan of blokkeren) en sitemaps (prioriteiten). Kwaadaardige crawlers kun je tegenhouden met rate limiting en een captcha.
AA
Frontend
BEM
AA
Frontend
Block Element Modifier
BEM is een manier om CSS-namen te geven zodat je overzicht houdt en code makkelijk opnieuw kunt gebruiken.: block__element--modifier. Je hoeft minder precies te zijn met CSS en maakt styles voorspelbaar en onderhoudbaar omdat de structuur in de naamgeving verwerkt is. Werkt met vanilla CSS, preprocessors zoals SASS en SCSS en CSS Modules.
AA
Frontend
SessionStorage
AA
Frontend
SessionStorage
SessionStorage lijkt op localStorage, maar data bestaat alleen tijdens de sessie van één tab. Het verdwijnt bij het sluiten van de tab, maar blijft bij een refresh. Elke tab heeft een eigen opslag. Ideaal voor tijdelijke data, zoals formulierstate of wizard-stappen.
AA
Frontend
Fetch API
AA
Frontend
Fetch API
De Fetch API is de moderne manier voor asynchrone HTTP-verzoeken en opvolger van XMLHttpRequest. Het is promise-based en ondersteunt request/response-objecten, streams en CORS. Standaard gaan er geen credentials mee (stel credentials: 'include' in). Controleer zelf op fouten via response.ok.
AA
Frontend
Next.js
AA
Frontend
Next JavaScript Framework
Next.js is een React-meta-framework van Vercel met API-routes, bestandsgebaseerde routing en automatische code splitting. Het is eenvoudig om mee te werken voor ontwikkelaars en bevat productie-optimalisaties out-of-the-box. De app router is de nieuwste architectuur en is de standaard voor moderne React-apps.
AA
Frontend
400 kaartjes
Een uitgebreide collectie begrippen voor elk niveau
12 categorieen
Van HTML & CSS tot databases en security
3 niveaus
Geschikt voor beginners en gevorderden
Voor teams & klassen
Ideaal als lesmateriaal of teambuilding tool
Offline oefenen
Fysiek aan de slag, zonder scherm