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.
uitwerken voor kick-off werkgroep
Jamie Tirbeni
Rood
Ik heb gekozen om de focus te leggen op een Responsive website
uitwerken voor kick-off werkgroep
Home pagina
About Riot
uitwerken na test in 2e werkgroep
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.
uitwerken voor 1e voortgang
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.
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 | ... | ... | ... |
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
uitwerken voor 2e voortgang
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.
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 |
| ... | ... | ... | ... |
| ... | ... | ... | ... |
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
uitwerken na test in 9e werkgroep
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
uitwerken voor 3e voortgang
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.
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 |
| ... | ... | ... | ... |
| ... | ... | ... | ... |
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
uitwerken voor eindgesprek
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.
Dit is mijn hamburger menu
Een repsonsive versie van mij site.
Een repsonsive versie van mij site. waarbij er al iets meer is toegevoegd.
Een repsonsive versie van mij site waarbij de lay-out is veranderd.
Korte omschrijving met plaatjes
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.
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.
- 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)
- https://css-tricks.com/practical-css-scroll-snapping/ (Gebruikt voor scroll-snap in section 6)
- https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp (Gebruikt voor het weghalen van de scrollbar in section 6)
- 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