Aanvullen workshop layout modes met uitleg en bronnen

docs/layout-in-css.md

@@ -1,18 +1,37 @@
-# Layout in CSS
+# The Client- Website
 
-_In de workshop S02W2-03-layout-modes wordt behandeld wat Layout Modes zijn,
-waarom het belangrijk is om hier meer van te weten, en hoe je met de
-verschillende modes een layout kan maken._
+## Layout in CSS
 
 Normal flow of _Flow Layout_ is de manier waarop _block_- en _inline_-elementen
 op een pagina worden weergegeven voordat er wijzigingen met CSS worden
-aangebracht.
+aangebracht. 
 
-Dat is dus wat je ziet als je “kale” HTML in de browser bekijkt.
+![Blokc and inline layout in normal flow](flow-layout.png)
+*Dat is wat je ziet als je “kale” HTML in de browser bekijkt*
+
+### Layout Modes
+
+Met CSS kun je met verschillende *modes* een layout kan maken. We onderscheiden 7 layout modes. Onderzoek met je tafel de verschillende Layout Modes in CSS, en schets op het whiteboard van elke mode een voorbeeld:
+
+- Flow Layout (Normal Flow)
+- Grid Layout
+- Flexible Box Layout (Flexbox)
+- Positioned Layout (Relative, Absolute, Sticky, Fixed, Anchor)
+- Float Layout
+- Multi-column Layout
+- Table Layout
+
+### Layout in CSS oefenen
 
 Om te oefenen met verschillende Layout Modes, hebben we de deeltaak “Layout in CSS”
 voor je klaargemaakt. Alles wat je hierin leert, kun je daarna toepassen in deze
 leertaak, voor je opdrachtgever.
 
 Voer de [Layout in CSS deeltaak](https://github.com/fdnd-task/layout-in-css) uit,
-en ga door met de leertaak.
+en ga door met de leertaak.
+
+
+### Bronnen
+
+- [Layout mode - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode)
+- [Understandig Layout Algorithms - Josh Comeau](https://www.joshwcomeau.com/css/understanding-layout-algorithms/)