Auteur: Joost Flick

1. https://css-tricks.com/creating-responsive-touch-friendly-carousels-with-flickity/
2. https://www.w3schools.com/howto/howto_css_dropdown.asp
3. https://stackoverflow.com/questions/40446658/javascript-add-transition-between-displaynone-and-displayblock

Je startniveau: De rode piste

Je focus: Helemaal responsive maken

Je opdracht: www.ah.nl

Screenshot:

Goed: Opzet, sticky header

Lastig: Producten carousel voor mobiel

https://www.w3schools.com/tags/tag_figure.asp

Screenshot(s):

• cards 3 naast elkaar stylen ipv caroussel
• minder divs gebruiken
• focussen op responsiveness
• kijken waar padding/margin gebruiken

Header + content responsive gemaakt. Op de screenshots hieronder is te zien hoe de content meeschaalt met de schermgrootte.

Feedback van Victor

• product cards uitbreiden
• h1 toevoegen
• rekening houden met widescreens

• Breedte aangepast zodat de site niet te breed wordt op widescreens
• h1 met visibility hidden toegevoegd (https://stackoverflow.com/questions/3239202/whats-the-correct-way-to-hide-the-h1-tag-and-not-be-banned-from-google)
• product kaarten uitgebreid
• adblocker banners gemaakt
• uitgelichte producten flex direction column voor mobiel
• footer toegevoegd
• product pagina toegevoegd
• dropdown menu + animatie toegevoegd

• divs vervangen door navs / lists
• toegankelijkheid verbeterd door focus toe te voegen aan de dropdown

Screenshot(s):