Repository navigation
Code & Design Review Squad Page
In de workshop Code & Design Review Squadpage van vrijdag 11/9/2026 wordt uitgelegd wat je moet doen.
Een van de fases van de Development Lifecycle (DLC) is Testen. Dit doen frontenders onder andere door regelmatig een code and design review te doen met collega's. Bij FDND doen we elke vrijdag zo'n review en bekijken we elkaars code en design. De feedback leg je vast in issues bij je repository. Hier kun je volgende week mee verder om je website te verbeteren.
Deze manier van werken heet iteratief werken. Je doorloopt meerdere keren de DLC, je test regelmatig, en je vraagt elke week feedback tijdens de code en design review. Zo kan je je website stap voor stap verbeteren.
Deze week ben je begonnen met het ontwerpen en bouwen van een squad page. Het maakt niet uit hoe ver je bent, je kan altijd feedback halen op stukken code of dat deel van het ontwerp dat je al wel gemaakt hebt.
Vandaag krijg je feedback op code en design die we in workshops in de tweede week hebben behandeld. Hieronder staat een leidraad voor de review die je op het werk van een andere groep gaat doen. Zorg ook dat jouw team zelf feedback krijgt! Schrijf altijd nette teksten in een issue en probeer een bron of voorbeeld bij te voegen als je een tip of verbeterpunt hebt.
Doe de review samen met jouw groepje en bespreek alles wat je tegenkomt. Doe minimaal één Code/Design review voor een andere groep uit je squad.
Voorbereiding:
- Zorg dat de Issues van jullie repository aan staan, en dat je site live staat via GitHub Pages, met een link erheen. En dat je de meest recente versie naar jullie online repository hebt gepusht.
ℹ️ Weet je niet meer hoe dat ging? Loop met je team nog even door de stappen van vorige week.
Code/Design Review:
- Test of de HTML goed is door een HTML validator check te doen op de W3C website: https://validator.w3.org. Schrijf een issue als er in de test problemen naar voren zijn gekomen. Maak voor elk probleem een apart issue aan, en bedenk ook een mogelijke oplossing voor het probleem.
- Bekijk alle HTML. Let met name op de Content sectioning: zijn de juiste elementen gebruikt voor de content van de pagina, zoals een
<main>,<header>,<footer>,<h1>-<h6>? Maak een issue aan wanneer jullie denken dat er een ander HTML element passender is. Leg ook uit waarom. - Bekijk de CSS, zijn enkele selectors en properties uitgelegd met comments in de code? Gebruik de CSS reference om te kijken of de uitleg klopt. Schrijf ook een issue als er geen comments met uitleg zijn geschreven.
- Bekijk de CSS en of er gebruik is gemaakt van CSS Grid. Maak een ontwerp met elkaar van de lay-out met hoe jullie denken dat het grid zou moeten werken. Klopt dit met de code? Bekijk ook of de children juist zijn gepositioneerd. Gebruik de CSS Grid reference om te kijken hoe je CSS Grid inzet. Schrijf een issue als er in de test problemen naar voren zijn gekomen.
- Test de website minimaal op één mobiel en op één desktop. Is de website responsive? Bekijk de media queries, werken ze? Schrijf een issue als er in de test problemen naar voren zijn gekomen en wanneer er een nog een breakpoint mist.
- Optioneel: Check het design in een browser. Schrijf een issues als je iets ziet wat beter kan of als je een leuk idee hebt.
Dit zijn goede bronnen om te gebruiken om HTML te leren en onderzoeken: