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
https://www.nike.com/nl/en/w/shoes-y7ok
- Header en footer goed namaken en responsive
- Pagina responsive
- filters scrollend aan de bovenkant toevoegen(mobiel)
- Meer filters werkend maken
- (search toevoegen?)*
- scrollende banner info
- Add to bag micro interactie bij het scrollen
- Als favoriet markeren
- (reviews en reviews schrijven ?)*
*Met genoeg tijd
uitwerken voor 1e voortgang
Eigenlijk is alles wat ik wilde doen tot nu toe goed gegaan. Dus geen problemen
Het aanpassen van de header/nav is nu responsive en ook echt overgenomen ipv een kleine versie van de desktop.
| 
| 
|
En datzelfde geldt voor de footer, maar die is nog niet helemaal klaar, maar hij is wel responsive.
| 
| 
|
samen met je groepje opstellen
| student 1 | student 2 | student 3 | student 4 |
|---|---|---|---|
| dit bespreken | en dit | en ik dit | en dan ik dat |
| en dat ook nog | dit als er tijd is | nog een punt | dit wil ik zeker |
| ... | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- punt 1
- punt 2
- nog een punt
- ...
uitwerken voor 2e voortgang
Het maken van de mobile menu inclusief logica bij het uitklappen en laten sliden van de zijkant ging wel goed. Dit heb ik ook toegepast voor de filter menu alleen komt deze van de onderkant ipv de zijkant.
| Mobile menu | Filter menu |
|---|---|
 |
 |
samen met je groepje opstellen
| student 1 |
|---|
| Wanneer kan je beter grid gebruiken dan flex |
| Beste manier om grid te gebruiken in een layout |
| Het maken van een carousel |
| ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Met grid kan je makkelijker dingen controllen
- Met Flex geef je het stuur meer aan de browser en dus beter te gebruiken voor simpele dingen
uitwerken na test in 8e voortgang
Lijst met je bevindingen die in de test naar voren kwamen:
De voice assistant zei bij de links steeds hetzelfde woord terwijl er 3 verschillende links stonden
Ik heb dit niet op kunnen lossen
Shoe type links werken niet met tab
Tab-index toevoegen
Op firefox kwam er een random scrollbar bij de filters
Geen overflow:scroll gebruiken, maar overflow:auto en correcte css om ook op firefox scrollbar te verwijderen
uitwerken voor 3e voortgang
Het maken van de search/results ging een beetje stroefjes omdat ik niet precies wist hoe ik dit moest implementeren(lists.js). Maar toen het uiteindlijk gelukt was, is hij er wel mooi uitgekomen. Ik wilde eerst ook de lists.js gebruiken voor het filteren, maar dit heb ik uiteindelijk toch zelf gedaan En naast het maken van de search heb ik ook de filters werken gemaakt inclusief counts voor welke filters actief zijn.
| search | results |
|---|---|
 |
 |
Deze week niet echt vragen voor mij
hier na afloop snel de uitkomsten van de meeting vastleggen
- comments plaasten
- puntjes op de i zetten
uitwerken voor eindgesprek
Alles was eigenlijk al af, maar het ging deze week vooral om het zetten van de puntjes op de i en comments plaatsten en een paar schoonheidsfoutjes in de css weghalen. En daarnaast ook het bijvullen en aanpassen van het shoelist object
hier screenshot(s) van je eindresultaat
| pagina 1 | pagina 2 |
|---|---|
 |
 |
continu bijhouden terwijl je werkt
Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).
- https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp scrollbar verwijderen, maar functionaliteit behouden
- https://realfavicongenerator.net/ Favicon maken
- https://listjs.com/ voor het maken van de searchable shoes
- https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects verwijderen van dubbele items in een object
- Nike.nl voor alle images