Repository navigation
Code & Design Review Layout in CSS
Suus ten Voorde edited this page Oct 2, 2026
·
3 revisions
Deze week ben je aan de slag gegaan met Layout Modes in CSS. Dit heb je eerst geoefend in de deeltaak layout-in-css en later heb je deze stof toegepast in de leertaak (de opdracht voor de opdrachtgever).
Vandaag doe je een code review op de CSS van de deeltaak layout-in-css en een code-review op de leertaak the-client-website.
Deze code-review voer je uit aan jouw tafel mét een mentor; je bent dus met 3–4 studenten en één mentor.
- Zorg dat je de DoD('s) van de deeltaak hebt afgerond. Push je laatste werk naar GitHub, publiceer je site via GitHub Pages en plaats een link bij je repo.
- Ga samen met jullie mentor de 9 basic layouts af. Per layout schrijft één student de CSS uitwerking op het whiteboard en laat de breakdownschets zien op de laptop.
- Heeft iedereen dezelfde oplossing als die op het whiteboard? Bespreek met elkaar de verschillen. CSS heeft een aantal verschillende manieren waarop je HTML kunt voorzien van een layout. Elke manier heeft eigen voor- en nadelen. Bespreek die ook met elkaar.
- Herhaal stap 2 en 3 voor alle 9 basic layouts. Elke student laat dus minimaal één layout zien op het whiteboard.
- Herhaal stap 2 en 3 voor de advanced layouts die zijn gemaakt. Heeft niemand een advanced layout gemaakt? Werk dan met elkaar als groep minimaal één advanced layout uit op het whiteboard (inclusief breakdownschets).
Werk in duo's voor deze code-review: jullie doen samen minimaal 2 reviews voor het andere duo aan jouw tafel.
- Pak het ontwerp in de Hifi schets of Figma erbij, en de gemaakte breakdownschets.
- Bekijk eerst de One Column Layout en kijk of het volgens de basisregels van leesbare tekst is opgemaakt. Maak een issue aan als iets ontbreekt.
- Bespreek met elkaar welke Layout Modes geschikt zouden zijn voor de verschillende onderdelen in het ontwerp. Hint 1: Flow Layout, Grid Layout, Flexible Box Layout, Float Layout of Positioned Layout. Hint 2: Layout Modes zijn net als HTML elementen ook te nesten. Je kunt bijvoorbeeld dus een Flexible Box Layout gebruiken in een Grid item.
- Bekijk of de CSS en media queries Mobile First zijn opgezet. Maak een nieuw issue met uitleg over Mobile First ontwikkelen, als dat nog niet zo is. Tip: kijk ook meteen of er met geneste CSS is gewerkt.
- Bekijk de website en de CSS (via devtools of in GitHub) en bepaal of de verschillende Layout Modes logisch, duidelijk en bruikbaar zijn opgezet. Schrijf je gedachten in een nieuw issue als reactie.
Dit zijn goede bronnen om te gebruiken om CSS layouts te leren en onderzoeken: