Write code conventions workshop, fix some bits

docs/code-conventies.md

@@ -1,23 +1,48 @@
-# The CLient - Website
+# The Client - Website
 
 ## Code Conventies
 
-Richtlijnen voor consitente, navolgbare en robuste code:
-Do's and Dont's als je code schrijft ... 
+Je bent nu twee weken bezig met de website voor je eerste opdrachtgever bij
+FDND. Twee weken waarin je al veel code hebt geschreven; je hebt aan de hand
+van een aantal schetsen een _prototype_ gemaakt in gestructureerde _HTML_.
+Je hebt _Layout Modes_ en _typografie_ toegepast via _CSS_, en waarschijnlijk
+je website _responsive_ gemaakt via het _Mobile first_ principe. Je hebt
+meerdere keren een code & design review gedaan en feedback gehad op je werk.
 
+Grote kans dat je nog niet niet heel veel tijd hebt genomen om eens rustig naar
+het totaalplaatje te kijken. Misschien ben je inmiddels het overzicht wel al
+kwijt. Er komt steeds meer code bij, en het wordt steeds complexer. Hoe zorg je
+er nou voor dat je robuuste code blijft schrijven, en dat je zelf het overzicht
+houdt?
 
+Je kunt voor jezelf een aantal _code conventies_ aanhouden, waardoor je grip
+houdt op je werk. In teams worden deze vaak vastgelegd, en wordt er van
+teamleden verwacht dat ze deze ook naleven. Sommige bedrijven leggen code
+conventies voor alle projecten binnen het hele bedrijf vast.
 
-Code conventions sprint 2
+Bij FDND houden we ook een aantal _code conventies_ aan:
 
-Waar ben je nu? Van HTML naar CSS
+### Ademruimte in HTML
 
-- HTML netjes indenten en ademruimte (white space van code - wooow - inception)
-- CSS heeft zelfde volgorde als HTML. Volgorde van de CSS komt overeen met de volgorde van de HTML
-- CSS van groot naar klein (generiek naar specifiek) Orden de CSS is van generiek-naar-specifiek, generieke styling staat bovenaan
-- Nesten van Media queries
-- Hardlopers: Container queries
+Zorg dat je je HTML netjes en consequent _inspringt_, bijvoorbeeld altijd met
+4 spaties, of tabs. Je HTML heeft dus ook witruimte nodig.
 
-Opdracht: 
-Refactor je code naar deze best practices
+### CSS dezelfde volgorde als de HTML
 
+...
 
+### CSS selectors van generiek naar specifiek
+
+...
+
+### Nest je media queries
+
+...
+
+Ben je al wat verder, kijk dan ook eens hoe je _Container Queries_ in kunt
+zetten op deze manier.
+
+### Opdracht
+
+Herschrijf (_refactor_) je eigen code aan de hand van bovenstaande code
+conventies. Begin met je HTML

docs/layout-in-css.md

@@ -1,12 +1,12 @@
-# The Client- Website
+# The Client - Website
 
 ## 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. 
 
-![Blokc and inline layout in normal flow](flow-layout.png)
+![Block and inline layout in normal flow](flow-layout.png)
 *Dat is wat je ziet als je “kale” HTML in de browser bekijkt*
 
 ### Layout Modes

docs/prototyping.md

@@ -1,6 +1,7 @@
-# The Client- Website
+# The Client - Website
 
 ## Prototyping
+
 Om een ontwerpprobleem op te lossen kan je verschillende (schets) technieken toepassen om grip krijgen op de opdracht, ideeën te verkennen en te onderzoeken. In de ontwerpfase van het project is het doel om snel een prototype te maken dat je kan testen en uitproberen. Zo zorg je ervoor dat je precies weet wat je moet gaan bouwen.
 
 Een prototype kan van alles zijn, bijvoorbeeld een schets om te bespreken met iemand uit je squad, een paper-prototype om snel te kunnen testen met een gebruiker of een gedetailleerd uitgewerkt design in Figma.