Procesverslag

Dit is het Procesverslag van mijn Website voor FED, Liam van Bart studentnummer: 500857313. De website die ik heb gekozen is die van UBER.

Jij

6

uitwerken voor kick-off werkgroep

Auteur:

Liam van Bart

Je startniveau:

Rood test

Je focus:

Surface

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.apple.com/nl/

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

Homepage

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

Pagina onderwijs apple

Breakdownschetsen

Toegankelijkheidstest WCAG checklist

### Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen:

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

meeting is niet gelukt vandaar herkansing

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

samen met je groepje opstellen

|Student 1 Esra

Ik struggle op dit moment met mijn iconen rechts krijgen in het menu. Ik wil dat het logo rechts blijft, en mijn logo links.

Mijn afbeelding in de eerste section is heel condensed terwijl ik wel de juiste afmetingen en afbeelding heb gebruikt.

| Student 2 Karenza @font face werkt niet

| Student 3 Bjornt Ik wil graag weten hoezo mijn 2e section niet het scherm volledig vult.

waarom kan ik de 'font-weight' van m'n nav niet aanpassen?

Bepaalde afbeelding laadt niet bij testen telefoon, hoe komt dat?

| Student 4 Sarah Header images overhoop gehaald hoe fix ik het weer

Hoe maak ik een button van een img en een woord samen

Hoe spreek ik alleen het logo aan, laatste img van de header in de 2e nav

|Student 5 Liam Afbeeldingen carousel met animiatie Nth of type voor de kleur van tekst lukt niet Hoe kun je het beste de iconen in de navbar doe

Verslag van meeting

• Image carousel , opacity JS
• Dropdown menu Forken van Sanne

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):

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)

Agenda voor meeting

• Jornt Waarom blijft niet mijn gehele navigatie plakken?

Hoe krijg ik mn tekst in sectie 4 responsive?

Er zijn maar 3 fonts beschikbaar om te downloaden font weight lukt niet

Oplossing: Position relative weghalen en padding toevoegen

• Karenza Responsive text /footer

Hoe werkt het overlappen van foto's/background

Hoe specifiek moet de uitleg van een Alt attribuut zijn?

Meer uitleg responisveness

Oplossing: Div omheen zetten

• Sarah Fonts kan ik niet vinden vanwege onduidelijke namen

Rondje boven een winkelmandje maken

hoe krijg je een link en p element onder elkaar?

Oplossing: Fonts importeren

• Esra

Hoe zorg ik dat de tekst in mijn section automatisch veranderd?

Hoe roep ik de eerste P in een section aan?

Hoe krijg ik verschillende items in een navigatie onder elkaar?

-Liam Hoe krijg ik 3 verschillende menu opties? Hoe maak ik een slideshow met animaties? Hoe zorg ik ervoor dat 1 knop 3 menus kan afsluiten?

samen met je groepje opstellen

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

• punt 1
• punt 2
• nog een punt
• ...

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Dropdown is goed gelukt ik heb geleerd hoe je door middel van JS classes kan toevoegen en verwijderen. Ook is de styling goed gelukt.

Dit was lastig/Is niet gelukt:

Helaas is het me niet gelukt om de slideshow exact na te maken met animaties.

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. Sanne voor header en footer
2. bron https://www.educative.io/answers/how-to-create-an-automatic-slideshow-with-html-css-and-js vervolgens aangepast met CHATGPT en ik kan het niet volledig uitleggen maar het werkt dus ik ben blij

Conclusie

In dit frontend project heb ik aanzienlijke vooruitgang geboekt in zowel JavaScript als CSS, waardoor mijn vaardigheden op het gebied van webontwikkeling aanzienlijk zijn verbeterd. Doorheen het project heb ik diepgaande kennis opgedaan over het gebruik van JavaScript voor interactiviteit en dynamische content, terwijl ik tegelijkertijd mijn vaardigheden in het stylen van webpagina's met CSS heb verfijnd. Deze ervaring heeft niet alleen mijn begrip van frontend-technologieën verdiept, maar heeft me ook voorzien van praktische inzichten die ik in toekomstige projecten kan toepassen. Kortom, dit project heeft mijn basis in frontend-ontwikkeling versterkt en mijn zelfvertrouwen vergroot om complexe en boeiende gebruikersinterfaces te ontwerpen.

Evaluatie

Ik begon erg langzaam en hierdoor had ik moeite met van start komen maar na het 2e gesprek ging het erg goed en heb ik ook veel geleerd! Ik kan in de toekomst beter eerder beginnen en vaker om hulp vragen dit maakte me namelijk een hoop duidelijk.