Repository navigation
Code & Design Review Prototype en HTML
Deze week ben je begonnen met het analyseren, ontwerpen en bouwen van de opdracht voor een opdrachtgever.
Het is aan te raden om in een project eerst alle content in HTML op te zetten. En pas te beginnen met de CSS als alle content in HTML is gebouwd en de code klopt.
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 doe je een code review op de HTML en het prototype van het ontwerp (in Figma). Deze review doe je in een duo. Je reviewt het werk van een ander duo. Je bekijkt dus samen in totaal naar twee verschillende repo's.
- Push je laatste werk naar GitHub, publiceer je site via GitHub Pages, plaats een link bij je repo, zet Issues aan.
- Vorm een duo.
- Schrijf wanneer je als duo klaar bent voor een review jullie Github handles op het whiteboard.
- Zoek een ander duo voor een review, bij voorkeur met andere opdrachtgevers. Hebben jullie een duo gevonden? Schrijf dan hun namen achter die van jullie op het whiteboard.
- Reviewen maar..!
- Test of de HTML goed is door een HTML validator check te doen op de W3C website: https://validator.w3.org. Schrijf in het “Prototype naar HTML” issue een reactie als er bij de validatie problemen naar voren zijn gekomen en probeer hints te geven voor een oplossing.
- Pak het ontwerp in de Hifi schets of Figma erbij. Bekijk de website zonder CSS (via devtools kun je eventueel het
<link>element uit de<head>verwijderen) en bepaal of deze logisch, duidelijk en bruikbaar is opgezet, aan de hand van de content en structuur uit het ontwerp. Schrijf je gedachten in het “Prototype naar HTML” issue als reactie. - Bekijk alle HTML elementen en gebruik de HTML elements reference om te checken of de juiste HTML elementen zijn gebruikt.
- Bespreek de Content sectioning. Zijn de juiste elementen gebruikt voor bijvoorbeeld
<article>,<footer>,<header>,<section>, headings,<main>, etc? Bespreek alle elementen en zoek op of ze goed zijn gebruikt. - Zijn de juiste elementen gebruikt voor de Text content, zoals
<p>,<ol>,<li>, etc? Bespreek alle elementen en zoek op of ze goed zijn gebruikt. - Zijn de juiste elementen gebruikt voor de Inline text semantics, zoals en
<a>,<strong>,<em>, etc? Bespreek alle elementen en zoek op of ze goed zijn gebruikt.
- Bespreek de Content sectioning. Zijn de juiste elementen gebruikt voor bijvoorbeeld
- Schrijf verbeteringen of suggesties over de gebruikte HTML ook als reactie in het “Prototype naar HTML” issue.
Pak het ontwerp van de Hifi schets of Figma er opnieuw bij en geef feedback op de volgende punten door een issue achter te laten:
- Is de hele pagina vormgegeven of ontbreken er onderdelen? Bekijk de sitemap om de structuur van de website te begrijpen.
- Is er een responsive ontwerp gemaakt voor verschillende schermformaten? En hoe is hier alvast rekening mee gehouden in de HTML?
- Kun je feedback geven op de visuele hiërarchie?
Nadat je de code/design review hebt uitgevoerd, is het tijd om alle ontvangen feedback te bekijken. Bepaal welke feedback waardevol is. Geef dit ook terug aan degene van wie je de feedback hebt ontvangen (je kunt reageren op issues en daar iemand in taggen). Bepaal vervolgens met welke feedback je maandag aan de slag gaat. Maak waar nodig issues aan.
Dit zijn goede bronnen om te gebruiken om HTML te leren en onderzoeken: