Responsive Design
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.
Andere termen met deze tag:
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
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
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
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