Procesverslag

Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.

Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.

Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Levon van de Velde

Je startniveau:

Blauw

Je focus:

Responsive

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.mcdonalds.com/nl/nl-nl.html

Screenshot(s) van de eerste pagina (small screen):

Homepagina

Screenshot(s) van de tweede pagina (small screen):

McCrispy Voordeelmenu pagina

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2^e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen: De website van McDonalds is erg simpel dus er valt weinig te verbeteren. Ten eerste is er geen h1 op de homepagina van de website. Ten tweede bevatten de img geen alt tekst.

Breakdownschets (week 1)

uitwerken na afloop 3^e werkgroep

de hele pagina:

dynamisch deel:

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

Deze week was niet lastig. Alle oefeningen met grids, flexbox en javascript lukte me wel. Het enige wat ik nog lastig vindt is alles semantisch maken met html.

Verslag van meeting

Ik heb geleerd hoe je sections en articles opstelt en het verschil daarvan. Ook heb ik geleerd dat je een img kan doen in een h1.

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

Deze week was lastig. Na alle html code te hebben geschreven begon ik een hamburger nav menu te maken voor mobiele schermen, maar het was ingewikkelder dan ik dacht. Ook nog was ik ziek aan het einde van de week dus kon ik niet veel verder komen.

Verslag van meeting

Ik was niet aanwezig bij deze meeting. Ik was ziek.

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9^e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):

1. de headers zijn op goede volgorde.
2. de homepagina bevat nu een h1.
3. de website is meer responsive.
4. de hamburgermenu button is beter gepositioneerd.
5. images bevatten alt teksten waar het nodig is.
6. hamburger menu buttons zijn niet zichtbaar voor screenreaders.

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

Deze week ging beter dan vorige weken. Ik heb eindelijk de nav bar af met een hamburger menu. Ook heb ik alles goed kunnen stylen en lijkt mijn website sprekend op de echte website.

Verslag van meeting

Vasilus heeft mij nog uitlegt hoe je betere responsiveness kan hebben met grid.

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Ik heb geleerd hoe ik met grid en flexbox een mooie en professionele ontwerp kan maken voor een website. Ook heb ik geleerd hoe ik semantische code schrijf en hoe ik een webpagina responsive kan maken voor verschillende soorten schermen. Als laatste heb ik geleerd hoe ik op een simpele manier een hamburger menu kan maken en die koppelen met een button door middel van javascript.

Dit was lastig/Is niet gelukt:

Het is mij niet gelukt om binnen de tijd een caroussel te maken zoals op de echte homepagina.

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

1. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. https://css-tricks.com/snippets/css/a-guide-to-grid/
3. De flexbox opdrachten
4. responsiveness opdrachten
5. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
6. https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5
7. https://cubic-bezier.com/#.43,-0.52,.45,1