Skip to content

Tbjamie/FED

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

Jamie Tirbeni

Je startniveau:

Rood

Je focus:

Ik heb gekozen om de focus te leggen op een Responsive website

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.riotgames.com/en

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

Home pagina Dit is de homepagina van de Riot Games website

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

About Riot Dit is de About Riot pagina op de Riot Games website

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2e werkgroep

Bevindingen

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

Toen ik de website van Riot games ging testen met een screenreader kwam ik erachter dat ze een knop hebben gemaakt aan de onderkant van hun website wat het makkelijker maakt om door de website heen te navigeren. Daarnaast hebben ze een optie gemaakt om meteen naar de main content te gaan of meteen naar de main navigatie te gaan wat het ook een stuk makkelijker maakt om door de website heen te navigeren.

Daarnaast leest hij alle headings voor met de titel die ook te lezen is, bij "Esports" hoor je dus ook "Esports". Bij de links leest hij alles voor BEHALVE de dropdowns "Who we are" en "Work with us" waardoor je die andere pagina's niet kan bereiken.

Breakdownschets (week 1)

uitwerken na afloop 3e werkgroep

de hele pagina:

breakdown van de hele pagina

Voortgang 1 (week 2)

uitwerken voor 1e voortgang

Stand van zaken

Het namaken van de website ging best wel goed, maar ik had per ongeluk een paar verkeerde items in de nav gedaan waardoor ik een paar dingen moest aanpassen. Toen ik dat gedaan had was mijn website eerst kapot, maar uiteindelijk heb ik het kunnen oplossen en ziet mijn homepage er weer hetzelfde uit als eerst. Ik heb ook mijn hamburger menu werkend gekregen met javascript en ik wil mij nu gaan focussen op de details van de homepage zoals hover, focus meer javascript etc. Daarna wil ik doorgaan met het maken van de tweede pagina op dezelfde manier en als ik daar klaar mee ben wil ik beginnen om alles responsive te maken.

Agenda voor meeting

samen met je groepje opstellen

Jamie Tirbeni Tim Sanne Bente
Ik wil mijn HTML laten nakijken HTML laten nakijken Geen specifieke vraag Een vraag over accessibility
Ik wil vragen wat "GET" doet bij forms ... ... ...
Ik heb een vraag over SVG code ... ... ...
Ik heb een vraag over Border gap ... ... ...
Ik wil iets vragen over een menu dropdown ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • Geleerd over "GET" vs "PUSH" in de forms tag
  • Meer geleerd over "aside" en hoe je die moet gebruiken
  • HTML pagina breakdown gedaan met elkaar
  • We hebben het gehad over heading levels
  • Mijn vragen zijn beantwoord

Voortgang 2 (week 3)

uitwerken voor 2e voortgang

Stand van zaken

Ik was deze week ziek dus ik had niet veel progressie gemaakt, maar het was me wel gelukt om het hamburger menu werkent te krijgen.

Voor de rest wil ik aankomende week gaan werken aan het responsive maken van mijn website.

Agenda voor meeting

samen met je groepje opstellen

Jamie Tirbeni Tim Sanne Bente
Ik had deze week niet echt vragen, omdat ik niet veel heb kunnen doen aangezien ik ziek was. Vraag over hamburger menu Geen specifieke vraag Een vraag over responsive
... ... ... Een vraag over nav en uitklap menu
... ... ... Een vraag over grid voor foto galerij
... ... ... ...
... ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • Het werk ziet er goed uit dus ik moet zo doorgaan
  • De code is gecontroleerd en die zag er goed en netjes uit

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9e werkgroep

Bevindingen

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

Verbeteringen na test:

  • Na het maken van deze tekst heb ik bij alle images alt text neergezet.
  • Ik heb geen video's meer op autoplay aanstaan.
  • Ik heb dark mode toegepast

Voortgang 3 (week 4)

uitwerken voor 3e voortgang

Stand van zaken

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

Het responsive maken van de website gaat tot nu toe best goed en ik ben daar bijna klaar mee.

Ik moet nu alleen nog 2 breakpoints maken.

Agenda voor meeting

samen met je groepje opstellen

Jamie Tirbeni Tim Sanne Bente
Ik heb een vraagje over een animatie Vraag over responsive Vraag over een img in de h1 Een vraag over reponsive
... Vraag over focus state ... Een vraag over de footer
... Laatste check van de website ... Een vraag over reponsive javascript
... ... ... ...
... ... ... ...

Verslag van meeting

hier na afloop snel de uitkomsten van de meeting vastleggen

  • We hebben het gehad over input fields
  • We hebben het gehad over field sets
  • We hebben hey gehad over formulieren en de validation daarvan
  • We hebben het gehad over wat responsive is
  • De animatie is niet haalbaar voor nu

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Korte omschrijving met plaatjes

Het responsive maken van de website ging erg goed en ook het maken van het hamburger menu ging goed.

Ook heb ik geleerd da niet alle elementen een fixed width of height nodig hebben om ze te stijlen.

top Dit is mijn hamburger menu top Een repsonsive versie van mij site. top Een repsonsive versie van mij site. waarbij er al iets meer is toegevoegd. top Een repsonsive versie van mij site waarbij de lay-out is veranderd.

Dit was lastig/Is niet gelukt:

Korte omschrijving met plaatjes

bummer Helaas is het niet gelukt om deze animatie te maken. Dit is wel gelukt, maar helaas niet op de mooiste manier qua code.. Dus dat vond ik wel jammer.

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://www.eddymens.com/blog/how-to-remove-the-arrow-from-the-html-details-tag (Gebruikt om de arrow in de details tag weg te halen)
  2. https://css-tricks.com/practical-css-scroll-snapping/ (Gebruikt voor scroll-snap in section 6)
  3. https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp (Gebruikt voor het weghalen van de scrollbar in section 6)
  4. https://www.freecodecamp.org/news/check-if-an-item-is-in-an-array-in-javascript-js-contains-with-array-includes/#:~:text=You%20can%20use%20the%20includes,the%20item%20doesn't%20exist. Gebruikt voor een javascript functie