Learning Journal

5-9-2025

Wat heb ik vandaag gedaan: gewerkt aan mijn visietekaartje, een breakdown-schets gemaakt en een journal gestart.

8-9-2025

Schrijf in je learning journal kort op wat je vandaag gedaan hebt.

• 3 dingen die je geleerd hebt
• 2 dingen die je interessant vindt
• 1 ding waar je nog vragen over hebt

10-9-2025

1. Een site kan verschillende breakpoints hebben.
2. Hoe een media query werkt en wat het doet.
3. De viewport van een scherm is meestal veel kleiner dan de daadwerkelijke schermgrootte.

12-9-2025

1. Welke feedback heb ik gegeven?
2. Welke feedback heb ik ontvangen?

17-9-2025

Wat heb je gedaan vandaag? Squad page afgemaakt.

3 dingen die je hebt geleerd?

24-9-2025

1. Schrijf en laat zien wat je hebt geleerd over schetsen. Welke 4 tips heb je gekregen?
2. Verwerk je aantekeningen in je learning journal en noteer de bronnen uit de workshop.
3. Bedenk wat je nu gaat doen en werk je projectboard bij.

26-9-2025

1. Wat heb je geleerd van de code van iemand anders? Benoem drie lessen die je meeneemt.
2. Wat vond je van de feedback die je hebt ontvangen? Met welke feedback ga je maandag verder?
3. Je hebt ook feedback gegeven. Had de ander hier wat aan? Wat zou je de volgende keer anders doen?

29-9-2025

1. Wat is het verschil tussen grid en flexbox?
   Flex is goed voor een rij of kolom, grid gebruik je als je meerdere richtingen nodig hebt.
2. Wat is de default layout mode?
   Flow mode.
3. Welke layout modes gebruik je per onderdeel?
   

1-10-2025

1. Drie eigenschappen van een leesbare tekst:
   • Tekst is minimaal 16px groot.
   • Regelafstand bij langere teksten is 1.4 (140%).
   • Optimale regellengte: 10–12 woorden.
   • https://www.w3schools.com/html/html5_syntax.asp
2. Stappen voor mobile-first werken:
   • Schrijf eerst CSS voor het kleinste scherm (basislayout).
   • Voeg breakpoints toe met @media (min-width: …) en pas stijlen aan voor grotere schermen.
   • Pas layout en content per breakpoint aan (meer kolommen, grotere fonts, extra elementen).
   • Herkenbaar in code: basisregels zijn mobiel; media queries staan erna met min-width.

6-10-2025

1. Beschrijf de 3 code-conventies van vandaag en link naar voorbeelden van hoe jij ze toepast.
   • HTML ademruimte
   • selectors volgen de HTML volgorde
   • Media queries nesten
2. Noteer 2 ideeën om de leesbaarheid van je HTML en CSS te verbeteren.
   • duidelijke en semantische class-namen
   • commentaarregels toe boven belangrijke secties of componenten in HTML en CSS, om later sneller terug te vinden waar iets staat of hoe iets werkt
3. Beschrijf wat refactoren inhoudt en hoe dat samenhangt met code-conventies.
   • Refactoren betekent dat je bestaande code herschrijft om deze overzichtelijker, leesbaarder en efficiënter te maken, zonder de functionaliteit te veranderen. Code-conventies helpen hierbij omdat ze een standaard bieden voor structuur, inspringing, naamgeving en ordening van code.

8-10-2025

1. Wat vond je van de feedback van je mentor? Welke feedback ga je verwerken voor de print-review?
   
   • "Je site ziet er goed uit, gaaf dat je al bezig bent gegaan met het maken van een filter systeem. Ook werkt je website goed mobile first en is er geen horizontale scroll aanwezig. Ik zou onderin de footer nog wat padding geven zodat de tekst niet helemaal onderin wegvalt van de pagina. Ook zou ik het onderste navigatie blok nog onder elkaar zetten zodat er geen problemen zijn dat de linkjes in elkaar overgaan. Goed bezig!"
   • ik ga al deze feedback vandaag verwerken in mijn opdracht aangezien de review morgen is
2. Wat is jouw belangrijkste vraag voor de opdrachtgever tijdens de sprint-review?
   • wat zijn de punten die ik kan verbeteren en waarom?

13-10-2025

1. Voor wie is toegankelijkheid belangrijk?
   • Voor iedereen, vooral mensen met een beperking (bijv. slechtziend, kleurenblind, motorische of cognitieve beperking).
   • Ook voor tijdelijke situaties, zoals een arm in het gips, fel zonlicht of een trage verbinding.
2. Wat moet ik nog doen voor woensdag voor de WCAG-deeltaak?
   • Handmatige WCAG-tests uitvoeren (toetsenbord, interactieve elementen, landmarks).
   • Bevindingen documenteren in de Wiki.
   • Korte samenvatting schrijven in de README.
3. Drie voorbeelden van moeilijke WCAG-richtlijnen:
   • Tekstalternatieven maken voor complexe afbeeldingen.
   • De juiste volgorde en structuur van koppen en landmarks waarborgen.
   • Goede toegankelijkheid met toetsenbord en screen readers garanderen.
4. Welke taak pak ik als eerste op voor de leertaak?
   • De toetsenbordtest

27-10-2025

1. geef een voorbeeld van een kleurencombinatie met een goed contrast
• zwart en wit
2. welke kleurcombintie werkt minder goed? maak hiervan een voorbeeld in je learning journal
• een kleur als dit met zo een witte achtergrond is niet heel handig
3. aan welk wcag level denk jij je te gaan houden? A, AA of AAA? waarom?
• AA, want AAA is voor overeidsinstanties en is te streng in mijn mening voor de meeste websites

29-10-2025

1. schrijf 1 ding dat je anders aan gaat pakken tijdens de komende sprint review
• vragen stellen over twee verschillende design keuzes
2. beschrijf 2 verbetereingen de je in je readme hebt gemaakt sinds vorige keer
• betere mockup en de verbeteringen van deze sprint erbij toegevegd
3. beschrijf 3 dngen waar je feedback op wil van de opdrachtgever tijdens de sprint review
• feedback op het design op verschillende schermen, dus klein middel en groot. feedback op de layout en op de groote van een cadeau

10-11-2025

1. schrijf 3 dingen op die je vandaag hebt geleerd
• Dat een huisstijl binnen het bedrijf hetzelfde wordt toegepast en herkenbaar blijft.
• Hoe je een interface inventory maakt en wat dat precies inhoudt.
• Hoe je een styleguide maakt
2. voeg links toe aan je learning journal met interesante voorbeelden en bronnen uit de slides en workshop
1. Decathlon styleguide
3. check de memes in het sprint 4 kanaal en voeg de leukste toe aan je learning journal

12-11-2025

1. schrijf 3 dingen op die je vandaag hebt geleerd over css
• custom properties, wat de root is en de volgorde van hoe sterk een element is

14-11-2025

1. Welke feedback heb je gegeven aan een ander team?
• filenaam die naar de stylesheet link was niet in orde
• de kleuren van de opdracht zijn niet te vinden in de stylesheet, ook is deze onoverzichtelijk ingedeeld
2. Wat heb je gezien bij een ander team wat in de gezamenlijke styleguide opgenomen gaat worden?
• classes aanmaken voor buttons inputs etc
3. Je hebt (als het goed is) issues assigned gekregen; wanneer ga je deze issues verwerken?
• aankomend weekend

21-11-2025

1. maak je genoeg gebruik van de gezamelijke stylesheet
• niet echt, er ontbreken nog componenten zoals inputs voor formulieren
2. benoem twee voorbeelden hoe je gebruik maakt van de cascade
1. wanneer je dezelfde class op een andere plek onderaan andere properties geeft dan winnen deze
2. een class is sterker dan een html element
3. schrijf drie custom properties op die je gebruikt in je eigen repo vanuid de gezamelijke stylesheet
1. font family
2. tweede achtergrondkleur
3. tweede tekst kleur
4. heb je door de code design review verbeterpunten gevonden voor de gezamelijke stylesheet? welke issues zjn er op de gezamelijke repo ingeschoten op basis van jouw werk
Onnodige classes

24-11-2025

1. bewaar de verschillende bronnen uit de wokshop in je learning journal, noteer per bron waar het over gaat en link naar de voorbeelden die je hebt gemaakt of gaat maken
• law of similarity
• law of proximity
• law of common region
2. noem 2 dingen die je nog wil leren
• de gestalt principes beter leren herkennen
• hoe ik de gestalt pricipes op verschillende manieren kan toepaseen

vragenlijst sprint 4

1. Ik weet hoe ik met GitHub iteratief kan werken, issues en sub-issues gebruik en kan uitleggen wat een fork, clone, commit, push, pull, merge en conflict zijn. = 3

2. Ik weet wat HTML-elementen, tags en attributen zijn, hoe ik HTML kan valideren en wat selectors, properties, values, units en combinators zijn in CSS. = 2

3. Ik weet hoe ik Figma gebruik om te variëren, interactieve prototypes maak en kan bepalen wanneer ik verder ga in code. = 2

4. Ik ken alle Layout Modes in CSS, weet wanneer ik welke inzet en hoe ik ze kan toepassen en combineren. = 2

5. Ik weet wat de WCAG richtlijnen zijn, hoe ik een WCAG audit uitvoer met automatische en handmatige tests en hoe ik resultaten verwerk. = 3

6. Ik weet hoe ik met alleen HTML een prototype maak en waarom een goed fundament belangrijk is voordat ik verder bouw. = 2

7. Ik weet hoe ik Mobile First ontwerp en ontwikkel, hoe ik dit herken in CSS en wat de voordelen zijn. = 2

8. Ik weet regels voor leesbaarheid van tekst, hoe ik typografie aanpas met CSS en welke units ik gebruik. = 2

9. Ik weet hoe kleurcontrast samenhangt met visuele hiërarchie en toegankelijkheid en hoe ik dit kan testen en verbeteren. = 2

10. Ik weet hoe ik een duidelijke Readme en Wiki maak, Markdown toepas en mijn werk presenteer tijdens een Sprint Review. = 1

11. Ik weet wat specificity, cascade en inheritance betekenen en kan dit uitleggen met een schets. = 1

12. Ik weet verschillende Gestalt wetten te benoemen en hoe ik ze inzet in ontwerp. = 1

13. Ik weet hoe ik formulieren maak in HTML, validatie toepas, states style met CSS en het verschil tussen labels en placeholders. = 2

14. Ik weet wat Custom Properties in CSS zijn, hoe je ze gebruikt en dynamisch inzet. = 1

15. Ik weet de basis van programmeren zoals variabelen, functies, loops en datatypes en het verschil tussen imperatief en declaratief. = 1

16. Ik weet wat keyframe animaties zijn, hoe ze verschillen van transitions en wanneer ik welke gebruik. = 1

17. Ik weet het verschil tussen feedback en feedforward en hoe dit samenwerkt in een UI. = 1

18. Ik weet wat een gebruikerstest is, hoe je die voorbereidt en hoe je tot bruikbare testresultaten komt. = 1

19. Ik weet hoe ik met querySelector, addEventListener en classList micro-interacties toevoeg met JavaScript. = 1

20. Ik weet wat UI events en event properties zijn en wat een callback functie is. = 0

3-12-2025

1. de worksop van vandaag bestond uit 3 opdrachten: de console, het 3 stappenplan, en van comments naar code. schrijf hoe ver je bent gekomen met de 3e opdracht en wat moet je daar nog voor doen?
ben bezig met het afmaken van mijn breakdown schets om vervolgens te beginnen met coderen

12-12-2025

1. hoe ging het testen met een testpersoon? is het gelukt om diegene hardop te laten praten
• het ging goed, ik vond het zelf moeilijk om still te blijven, maar de test persoonn kon de test goed uitvoeren omdat het issue heel duidelijk was
2. wat ga je voor vrijdag nog toevoegen aan je interactie voor de opdrachtgever wat wil je vrijdag gaan testen
• de add to list interactie maar dan ook op de homepagina want nu heb ik het alleen op de detailpagina staan
3. wat is je favoriete browser en waarom welke ga je hierna vaker gebruiken
• de browser die ik het meest gebruik is chrome, maar het is niet mijn favoriet, ik gebruik die meervanwege gemak en omdat ik het al heel lang gewend ben, welke ik vaker ga gebruiken is brave vanwege hun handige ingebouwde functies
4. en een doordenker, waarom denk je dat het goed is voor eindgebruikers dat er meerdere browsers bestaan
• omdat niet alle features die wij gebruiken door alle browsers worden ondersteunt

05-01-2026

1. wat zijn je goede voornemens voor dit jaar
• meer aan mijn journal werken ;)
2. fdnd is een soort bedrijf waar je van elkaar kan leren, de volgende stap is elkaar helpen en samen beter worden bespreek met je tafel hoe we dit kunnen doen
• vragen stellen aan elkaar?
• speciefieke feedback vragen

14-01-2026

1. Beschrijf 3 nieuwe CSS properties die je nog niet kende. Schrijf een paar zinnen over deze properties en link naar voorbeelden.
1. De :target pseudo-class gebruik om een element te stylen dat is aangeklikt via een URL met een hash. Handig voor simpele navigatie zonder JavaScript. MDN :target
2. dvh Dynamic Viewport Height past zich aan aan de browser op mobiel, zoals de adresbalk. Dit werkt beter dan vh en voorkomt layoutproblemen. MDN dvh
3. :focus-visible laat focus stijlen alleen zien bij toetsenbordgebruik. goed voor toegankelijkheid zonder dat het er rommelig uitziet. MDN :focus-visible
2. beschrijf 2 disney animatie principes die je nog niet helemaal begrijpt welke vragen heb je daarvoor
• staging en arc, ik snap de betekenis van de animaties maar wat ik niet helemaal begrijp is hoe ik dit zou uitwerken in code, bij deze twee specifiek lijkt me dat nogal moeilijk
3. beschrijf 1 animatie principe dat je toe gaat passen aan je persoonlijke website tijdens assesment werk
• Anticipation, veel elemeneten hebben een hover effct wat al te maken heeft met anticipation

19-01-2026

1. met welke code conventies heb je nog moeite? hoe komt dat?
• met class namen bedenken als er elementen zijn op een website die op elkaar lijken dan gebruik ik al snel class namen die te veel op elkaar kunnen lijken wat op een grote schaal voor verwarring kan zorgen
2. welke code vond jij tijdens een code review van iemand anders prettig lezen? weet je nog waar dat door komt?
• van mathijs want hij nest zijn code goed met veel ruimte wat fijn leest
3. hoeveel tijd zou je tijdens een sprint in moeten plannen voor alleen refactoren
• een uur aan het begin en een uur aan het eind

vragenlijst sprint 6

1. Ik weet hoe ik met GitHub iteratief kan werken, gebruik issues en sub-issues, en ik kan uitleggen wat een fork, clone, commit, push, pull, merge en conflict inhouden. = 3

2. Ik weet van HTML wat elementen, tags en attributen zijn, hoe ik mijn HTML kan valideren, en van CSS wat selectors, properties, values, units en combinators zijn. = 3

3. Ik weet hoe ik Figma kan gebruiken om te variëren, hoe ik interactieve prototypes kan maken, en ik kan inschatten op welk moment ik verder ga in code. = 2

4. Ik weet alle Layout Modes in CSS en eigenschappen van elke te benoemen, kan bepalen welke ik inzet en ze toepassen en combineren. = 3

5. Ik weet wat de WCAG richtlijnen zijn, hoe ik een WCAG audit uitvoer met automatische en handmatige tests en hoe ik testresultaten verwerk. = 3

6. Ik weet hoe ik met alleen HTML een prototype maak en waarom een robuust fundament belangrijk is voordat ik volgende lagen toevoeg. = 3

7. Ik weet hoe ik Mobile First ontwerp en ontwikkel, hoe ik dit herken in CSS, hoe CSS nesting helpt en wat de voordelen zijn. = 3

8. Ik weet regels voor leesbaarheid van tekst en hoe ik typografie aanpas met CSS, inclusief properties en units. = 2

9. Ik weet hoe kleurcontrast samenhangt met visuele hiërarchie en toegankelijkheid en hoe ik dit kan testen en verbeteren. = 3

10. Ik weet hoe ik een duidelijke Readme en Wiki maak met Markdown en hoe ik mijn werk presenteer tijdens een Sprint Review. = 2

11. Ik weet wat specificity, cascade en inheritance betekenen en kan dit uitleggen met behulp van een schets. = 2

12. Ik weet verschillende Gestalt wetten te benoemen en kan ze toepassen in ontwerp. = 2

13. Ik weet hoe ik formulieren maak in HTML, validatie toepas, states style met CSS en het verschil tussen labels en placeholders. = 2

14. Ik weet wat Custom Properties zijn, hoe je ze gebruikt en hoe ze samenwerken met specificity, cascade en inheritance. = 1

15. Ik weet wat variabelen, functies, loops en datatypes zijn en het verschil tussen imperatieve en declaratieve talen. = 1

16. Ik weet wat keyframe animaties zijn, hoe ze verschillen van transitions en wanneer je welke gebruikt. = 3

17. Ik weet het verschil tussen feedback en feedforward en hoe duidelijke labels de UI verbeteren. = 2

18. Ik weet wat een gebruikerstest is, hoe je deze voorbereidt en hoe je tot bruikbare testresultaten komt. = 2

19. Ik weet hoe ik met querySelector, addEventListener en classList micro-interacties toevoeg in JavaScript. = 2

20. Ik weet wat UI events en event properties zijn en wat een callback functie is. = 1