Inhoud

Work-in-progress

Les 1 - Bad UI

Een design implementeren in HTML lijkt eenvoudig, maar vaak lijkt het resultaat nadien niet op het design. Dit is vooral het geval bij het onervaren oog, bij alles wat foutgerelateerd is en in situaties waar de eisen van "responsiveness" zich zichtbaar maken. Beschouw deze les als een training voor het oog.

Les 2 - CSS Flexbox Layout Deep Dive

CSS Flexbox is intuïtief eenvoudig te gebruiken, wat ervoor zorgt dat sommigen nalaten om zichzelf degelijk op te leiden in de Flexbox layout. Dit zorgt steeds weer voor visuele artefacten, voornamelijk wanneer er "plaats te weinig" is (bijvoorbeeld: mobiele applicatie geschreven en getest op iPhone 11 openen op iphone 7, of een responsive applicatie in het algemeen).

We behandelen onder andere volgende onderwerpen:

De exacte (!) betekenis van flex-basis en de relatie met width/height.
Hoe "vrije ruimte" of "ontbrekende ruimte" wordt verdeeld of gecompenseerd met flex-grow en flex-shrink.
Waarom het belangrijk is steeds de 3 values (flex-grow, flex-shrink, flex-basis) te definiëren.
Frequente "life hack": width 0 in combinatie met flex.

Les 3 - CSS: Capita Selecta

Enkele technieken en patronen komen in CSS frequent voor. Daarnaast zijn er tal van best practices. Zowel de technieken/patronen en de best practices, hoewel vaak eenvoudig toepasbaar, zijn niet universeel geweten.

We behandelen onder andere volgende onderwerpen:

Mobile first en de logische opbouw van media-queries
De "rem" als dominante eenheid voor positie en dimensie
De exacte implicaties van statische, absolute en relatieve postionering. Absoluut en relatief ten opzichte van “wat”?
Procentuele padding als mechanisme voor bekomen van aspect ratio-bewarende elementen
Theming do’s en dont’s

Nadien kan je volgende vragen beantwoorden:

Wat bedoelen we met statische positionering?
Ten opzichte van wat is “position: relative” relatief?
Ten opzichte van wat is “position: absolute” relatief?
Wat is de “rem” en waarom verkiezen we die boven “px”? Wat is het verschil met “em”?
Wat bedoelen we met “mobile-first CSS” en waarom ben ik boos als je dat niet doet in je media queries?