Merge branch 'main' of github.com:fdnd-task/progressive-enhancement

* 'main' of github.com:fdnd-task/progressive-enhancement:
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md
  Update README.md
  Update INSTRUCTIONS.md
  Update INSTRUCTIONS.md

README.md

@@ -2,7 +2,7 @@
 
 # Progressive Enhancement
 
-Een oefening in het ontwerpen en bouwen van interfaces volgens het principe van Progressive Enhancement
+Een oefening in het ontwerpen en bouwen van websites volgens het principe van Progressive Enhancement
 
 ## Licentie
 

docs/INSTRUCTIONS.md

@@ -2,13 +2,13 @@
 
 # Progressive Enhancement
 
-Ontwerp en bouw interfaces in lagen
+Ontwerp en bouw een website in lagen
 
 ## Context
 
 Deze deeltaak hoort bij sprint 9 "The Web is for Everyone". Dit is een deeltaak die je individueel uitvoert.
 
-In het college _S09W2-02-Progressive-Enhancent wordt behandeld wat Progressive Enhancement is.
+In het college _S09W2-02-Progressive-Enhancement wordt behandeld wat Progressive Enhancement is.
 
 Deze deeltaak hoort bij de leertaak:
 - [the-web-is-for-everyone-interactive-functionality](https://github.com/fdnd-task/the-web-is-for-everyone-interactive-functionality)
@@ -21,14 +21,18 @@ Deze deeltaak hoort bij de leertaak:
 
 Maar het web is geen gecontroleerde (programmeer) omgeving, je kan er gerust van uit gaan dat niemand precies hetzelfde te zien krijgt als wat jij in je browser ziet. Er zijn technische beperkingen, zoals afmetingen van de browser, type van de browser, versie van de browser, combinatie van browser extensies, grootte van het apparaat, manier van interactie, kwaliteit van de hardware, kwaliteit van het netwerk en er zijn mensen, allemaal verschillende mensen ...
 
-Het doel van deze opdracht is te leren hoe je een interface kan ontwerpen en maken met behulp van _Progressive Enhancement_ zodat het voor iedereen toegankelijk is.
+Het doel van deze opdracht is te leren hoe je een website kan ontwerpen en maken met behulp van _Progressive Enhancement_ zodat het voor iedereen toegankelijk is.
 
 ### Progressive enhancement
 Progressive Enhancement is een _(coding) strategy_ waarmee je er voor kan zorgen dat je website het altijd doet. 
 
-1. Eerst bouw je de _core functionality_ van je website in HTML, zo nodig met server-side rendering. De _content layer_.
-2. Daarna voeg je CSS toe voor feedback voor de gebruiker en om de huisstijl toe te passen, de _presentation layer_.
-3. Tot slot voeg je met CSS en JS extra enhancements toe om de _User Experience_ te verbeteren.
+1. Eerst bouw je de _core functionality_ van je website in HTML, zo nodig met server-side rendering. 
+De _content layer_. 
+Zo zorg je er voor dat je website het in de meest eenvoudige vorm goed doet.
+2. Daarna voeg je CSS toe voor feedback voor de gebruiker en om de huisstijl toe te passen.
+Dit noemen we de _presentation layer_.
+3. Tot slot voeg je met CSS en JS extra enhancements toe om de _User Experience_ te verbeteren. 
+Als een browser CSS en/of JS niet ondersteunt valt het terug naar laag 1 of 2, zodat de website altijd werkt.
 
 ![image](https://github.com/fdnd-task/progressive-enhancement/assets/1391509/f6d0490b-6748-4fc8-8a63-d33d2f2d0b68)
 <br><small>_The skateboard may be a little slower, but it doesn’t stop the user getting to where they want to go. So, if the user’s browser doesn’t support JavaScript or modern CSS then it doesn’t break_ - Andy Bell
@@ -38,29 +42,33 @@ Progressive Enhancement is een _(coding) strategy_ waarmee je er voor kan zorgen
 
 ## Werkwijze
 
-Voor deze opdracht ga je een aantal UI componenten ontwerpen en bouwen in verschillende lagen, volgens het principe van _Progressive Enhancement_. 
+Voor deze opdracht ga je een aantal UI componenten ontwerpen, bouwen en testen in verschillende lagen, volgens het principe van _Progressive Enhancement_. 
 
+Fork deze leertaak en ga aan de slag met de [files die klaar staan](https://fdnd-task.github.io/progressive-enhancement/).
+
+Voor elk component staat een HTML-file klaar met een demo video van het eindresultaat. 
+In de HTML van elk component staan wat hints en content die je nodig hebt.
 
 
 ### UI componenten
 
 Maak minimaal 3 van onderstaande user interface componenten: 
 
-- Veelgestelde vragen
-- Switch control
-- Mobiel menu
-- Rating
-- Favorieten picker
-- Carrousel
-- File upload met preview
-- Tabbladen
+- [Veelgestelde vragen](https://fdnd-task.github.io/progressive-enhancement/faq.html)
+- [Switch control](https://fdnd-task.github.io/progressive-enhancement/switch.html)
+- [Mobiel menu](https://fdnd-task.github.io/progressive-enhancement/menu.html)
+- [Rating](https://fdnd-task.github.io/progressive-enhancement/rating.html)
+- [Favorieten picker](https://fdnd-task.github.io/progressive-enhancement/pickers.html)
+- [Carrousel](https://fdnd-task.github.io/progressive-enhancement/carrousel.html)
+- [File upload met preview](https://fdnd-task.github.io/progressive-enhancement/file.html)
+- [Tabbladen](https://fdnd-task.github.io/progressive-enhancement/tabs.html)
 
 
-## Aanpak (per component)
+### Aanpak (per component)
 
-1. Beschrijf in eigen woorden wat dit component is, en wat eigenlijk de _core functionaliteit_ is. Gebruik de demo video om een idee te krijgen.
-2. Schets het component, en de interactie.
-3. Laag 1: Onderzoek welke HTML je voor de _core functionaliteit_ nodig hebt, maak hiervan een breakdownschets, en schrijf je HTML (gebruik de hints en content in de code die klaarstaat, MDN en CanIUse).
+1. Beschrijf in eigen woorden wat dit component is, en wat de _core functionaliteit_ is. Gebruik de demo video om een idee te krijgen.
+2. Schets het component en de interactie 
+3. Laag 1: Onderzoek welke HTML je voor de _core functionaliteit_ nodig hebt, maak hiervan een breakdownschets, en codeer je HTML (gebruik de hints en content in de code die klaarstaat, MDN en CanIUse).
 4. Test deze HTML versie op verschillende browsers en devices.
 5. Laag 2: Voeg CSS toe, aan de hand van MDN, CanIUse en `@supports`.
 6. Test deze “enhanced” versie op verschillende browsers en devices.