CSS Layouts en Flexbox
Je hebt nu een goede basis in HTML en CSS, en je webpagina begint vorm te krijgen. In dit hoofdstuk gaan we een grote stap zetten in het verbeteren van de layout van je website door gebruik te maken van het CSS Box Model en Flexbox. Dit zal je helpen om je webpagina professioneler en responsiever te maken.
Wat ga je leren?
- Begrijpen van het CSS Box Model: margins, borders, padding en content.
- Introductie tot Flexbox voor geavanceerde lay-outs.
- Hoe je flex containers en items opzet.
- Elementen uitlijnen en ordenen met Flexbox.
- Je webpagina herstructureren voor een betere layout.
CSS Box Model
Wat is het CSS Box Model? In CSS wordt elk element op een webpagina beschouwd als een rechthoeki...
Flexbox
Wat is Flexbox? Flexbox, of de Flexible Box Layout Module, is een CSS3-layoutmodel dat het eenvo...
Opdracht: Gebruik van Flexbox
Stap 1: Structureren van je HTML Pas je index.html aan om een flex container en flex items te he...
Oefeningen
Oefening 1: Maak een Flexbox Layout voor je Footer Wat te doen? Maak van je <footer> een flex...
Afronding CSS Layouts en Flexbox
In dit hoofdstuk heb je het volgende geleerd: Het CSS Box Model: Begrip van margins, borders, ...