Wat leer je in deze cursus?

In deze cursus leer je eerst geavanceerdere onderwerpen zoals filters, transities en animaties, en de werking van mediaqueries. Daarna hoe je een site layout kunt maken met CSS Grid. Daarna leer je hoe je met Flexbox onderdelen van het grid kunt lay-outen, of onderdelen van de pagina. Zo is het met Flexbox eenvoudig om kolommen van gelijke hoogte te maken (onafhankelijk van de inhoud), of elementen vertikaal te positioneren, iets wat voorheen enkel met onhandige hacks of de verouderde tabellen mogelijk was. De opzet van de sites die we maken in de cursus volgt het bekende “mobile-first” systeem van webdesign, met een eenvoudige “fallback” zodat oudere browsers die de nieuwe modules niet ondersteunen de pagina’s toch goed zullen vertonen.
CSS Grid biedt een compleet layout systeem gebaseerd op een combinatie van horizontale en vertikale vlakken, dat onafhankelijk van de volgorde van de content kan worden opgezet. Hiermee kan de inhoud van een webpagina op elke gewenste plaats worden gezet.
Flexbox is een iets eenvoudiger systeem en werkt of horizontaal, of vertikaal, eendimensionaal dus. Dit kan gebruikt worden in onderdelen van een Grid layout, zoals een header of footer, voor meer simpele layouts, of voor de layout van onderdelen binnen een pagina.
CSS Grid en Flexbox werken in alle moderne browsers.