Update code-design-review-prototype-en-html.md

fdnd-task · Sep 27, 2024 · bbb407d · bbb407d
1 parent da79deb
commit bbb407d
Showing 1 changed file with 20 additions and 19 deletions.
diff --git a/docs/code-design-review-prototype-en-html.md b/docs/code-design-review-prototype-en-html.md
@@ -3,46 +3,46 @@
 ## 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 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. 
+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. 
 
 
-### Aanpak 
 
-Vandaag doe je een code review van de HTML en het prototype ontwerp. 
-Werk in duo's en doe minimaal 4 reviews bij andere studenten. 
+### Aanpak
 
-Begin met je naam op het whiteboard te schrijven. 
-Schrijf je naam naast die van een klasgenoot aan een andere tafel, als je een review gaat doen. 
-Zo krijgt iedereen vandaag ook 4 reviews.
+Vandaag doe je een code review van de HTML en het prototype ontwerp. Werk steeds in duo's; doe minimaal 4 reviews bij andere studenten, en zorg dat je 4 reviews krijgt van andere studenten.
 
+1. Push je laatste werk naar GitHub, publiceer je site via GitHub Pages, plaats een link bij je repo en zet Issues aan.
+2. Schrijf als je klaar bent voor een review je naam op het whiteboard. 
+3. Schrijf daarna je naam naast die van een klasgenoot aan een andere tafel, waarbij je onderstaande code en design review gaat doen.
+4. Als je klaar bent, ga je verder met een andere student aan een andere tafel, en schrijf je ook daar je naam.
+5. Zorg bij je eigen code en design reviews dat je die krijgt van studenten die jij niet gereviewd hebt.
+6. Aan het eind van de ochtend staan er dus vier namen achter jouw naam, die jouw werk gereviewd hebben. En staat jouw naam bij vier andere studenten.
 
 
-#### HTML
+#### Prototype in HTML
 
-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 in de validatie problemen naar voren zijn gekomen.
+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 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 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 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>` en headings? Bespreek alle elementen en zoek op of ze goed zijn gebruikt. 
- - Zijn de juiste elementen gebruikt voor de *Text content*, zoals `<p>`, `<ol>` en `<li>`?
- - Zijn de juiste elementen gebruikt voor de *Inline text semantics*, zoals en `<a>` en `<strong>`?
-
-Schrijf verbeteringen of suggesties over de gebruikte HTML ook in het “Prototype naar HTML” issue.
+ - 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. 
 
-Is de HTML volledig en klaar voor de volgende laag (CSS)? Sluit dan het “Prototype naar HTML” issue.
+Schrijf verbeteringen of suggesties over de gebruikte HTML ook als reactie in het “Prototype naar HTML” issue.
 
 
 #### Prototype ontwerp
 
-Pak het ontwerp in de Hifi schets of Figma er weer bij.
+Pak het ontwerp in de Hifi schets of Figma er weer bij, en geef feedback op de volgende onderwerpen.
 
-Is de hele pagina vormgegeven?
+Is de hele pagina vormgegeven, of ontbreken er onderdelen?
 
 Is er een responsive ontwerp gemaakt voor verschillende schermformaten? En hoe is hier alvast rekening mee gehouden in de HTML?
 
@@ -57,5 +57,6 @@ Dit zijn goede bronnen om te gebruiken om HTML te leren en onderzoeken:
 
 - [HTML Validator W3C](https://validator.w3.org)
 - [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [How to Section Your HTML](https://css-tricks.com/how-to-section-your-html/)