Dagelijks Journal

Maandag 1 september 2025

• Uitleg gekregen over de opleiding en kennismaking met iedereen.
• Foto gemaakt.
• Eerste visitekaartje ontworpen.

Dinsdag 2 september 2025

• College gevolgd over CSS.
• Geleerd hoe CSS werkt en hoe ik het kan toepassen.

Woensdag 3 september 2025

• Nieuwe schetsen gemaakt en ideeën uitgewerkt.
• Een ander visitekaartje ontworpen en aangepast.

Donderdag 4 september 2025

• Cursus JavaScript gevolgd.
• Eerste JavaScript toegepast op mijn site.
• Mijn site afgerond.

Vrijdag 5 september 2025

• Mijn code laten zien en feedback gekregen.
• Zelf ook code van anderen gereviewd.
• Tweedejaars kwamen langs om ons werk te bekijken.

Maandag 8 september 2025

• We zijn in groepen gezet.
• Een eerste schets gemaakt voor de squadpage.

Dinsdag 9 september 2025

• Uitleg gekregen over CSS Grid.
• Geoefend met Grid en de basis toegepast.

Daily Checkout

1. Verschil Flexbox / Grid: Flexbox = één richting, Grid = twee richtingen.
2. Default layout: block of inline flow layout.
3. Welke layout modes gebruik ik? Grid voor structuur, Flex voor componenten.

Woensdag 10 september 2025

• Workshop responsive design gevolgd.
• Breakdownschets gemaakt voor responsive design.

Donderdag 11 september 2025

• Learning Programming gehad.
• Geoefend met JavaScript.

Vrijdag 12 september 2025

• HTML code review gedaan.
• Feedback gekregen over semantische HTML.
• Eigen code laten reviewen.

Maandag 15 september 2025

• Nieuwe decaan gesproken.
• Hoe je werk toevoegt aan Portflow besproken.
• Visuele hiërarchie behandeld.

Dinsdag 16 september 2025

• Nieuwe breakdownschets gemaakt.
• Figma ontwerpen uitgewerkt.
• Ontwerp gekozen.

Woensdag 17 september 2025

• Readme-pagina gemaakt.
• Geleerd waarom samenwerken aan één pagina niet efficiënt is.

Dinsdag 23 september 2025

• College over prototyping gevolgd.
• Geleerd dat schetsen ook communicatie zijn.
• Tips gekregen: tekst eerst, schaduw, typografie-hiërarchie.

Maandag 29 september 2025

• Herhaling layout-technieken.
• CSS Grid / Flexbox toegepast.

Woensdag 1 oktober 2025

• College Breakpoints / Media Queries.

Vrijdag 3 oktober 2025

• Verdieping responsive design.

Maandag 6 oktober 2025

• Workshop codeconventies.
• Coachgesprekken gehad.

Dinsdag 7 oktober 2025

• CSS Challenge: positionering.
• Geleerd hoe relative / absolute / fixed werken.

Woensdag 8 oktober 2025

• Voorbereiding sprint-review.
• Tips gekregen over documentatie.

Donderdag 9 oktober 2025

• Sprint review met opdrachtgever.
• Positieve feedback + verbeterpunten.

Vrijdag 10 oktober 2025

• Retrospect sprint 2.
• Geleerd om beter te plannen en documenteren.

Maandag 13 oktober 2025

• Start sprint.
• Workshop toegankelijkheid.
• Coachgesprek leerdoelen.

Dinsdag 14 oktober 2025

• Kleur contrast challenge.
• WCAG-audit verder uitgewerkt.

Woensdag 15 oktober 2025

• Presentaties WCAG-audit.
• Workshop nette HTML.
• Coachgesprek.

Donderdag 16 oktober 2025

• Kleine HTML-aanpassingen gedaan.
• Website gecontroleerd op toegankelijkheid.

Vrijdag 17 oktober 2025

• Code designreview over toegankelijkheid.
• Lezing Inclusive Design.
• Tribe-activiteit besproken.

Maandag 27 oktober 2025

• Workshop kleur contrast.
• Tools geleerd zoals Lighthouse en contrast checkers.
• Coachgesprek.

Dinsdag 28 oktober 2025

• Laatst sprint details uitgewerkt.
• Kleur- en contrastfeedback gevraagd.

Woensdag 29 oktober 2025

• Wrap-up sprint 3.
• #NoMouse challenge gedaan.
• Focus-states verbeterd.

Donderdag 30 oktober 2025

• Sprint review met opdrachtgever.
• Feedback over visuele hiërarchie.

Donderdag 13 november 2025

Vandaag heb ik vanuit huis gewerkt aan de gezamenlijke styleguide. Ik heb onderdelen aangevuld, vragen uitgezocht over styleguides en stylesheets, en samen met mijn team gewerkt aan een consistentere opzet.

Vrijdag 14 november 2025

Daily Checkout

• Feedback gegeven over navigatiestructuur van een ander team.
• Spacing-systeem gezien bij ander team → toegevoegd aan styleguide.
• Issues worden maandag opgepakt.

Maandag 17 november 2025

Workshop typografie gevolgd. Geleerd over font-stacks, serif/sans-serif, @font-face, hyphens en leesbaarheid in webdesign.

Woensdag 19 november 2025

Daily Checkout – Formulieren

• Inputs hebben labels nodig voor toegankelijkheid.
• Type, autocomplete, inputmode en enterkeyhint verbeteren UX.
• Fieldsets en legends geven structuur.
• Required, maxlength, min, max en step regelen validatie.
• Input pseudo-classes: :focus, :valid, :invalid, :required, enz.

Vrijdag 21 november 2025

Daily Checkout – Code/Design Review

• Ik heb niet genoeg gebruikgemaakt van de gezamenlijke stylesheet.
• Cascade gebruikt via algemene → specifieke selectors.
• Gebruikte custom properties: --spacing-m, --color-primary, --font-size-base.
• Verbeterpunten: minder inline CSS, variabelen consistenter gebruiken.

Maandag 24 november 2025

Learning Journal – Workshop Layout Compositie

• Bronnen toegevoegd: Alle materialen opgeslagen met uitleg en links naar voorbeelden.
• Dingen die ik nog wil leren:
  • Beter toepassen van visuele hiërarchie.
  • Consistente whitespace gebruiken in grotere layouts.
• DoD toegevoegd in Portflow: Gebruik van Gestaltprincipes aantoonbaar gemaakt.

Dinsdag 25 november 2025

Laatste voorbereidingen voor de sprint review. Geen CSS-challenge vandaag, vooral begeleid bij openstaande vragen.

Woensdag 26 november 2025

Daily Checkout – 1 Minute Paper

• Mijn codevraag: Wat was mijn belangrijkste codeprobleem vandaag en hoe heb ik dit opgelost?
• Oplossing: Console-error gevolgd, opgelost en documentatie toegevoegd in mijn Learning Journal.
• Voorbereid op de sprint review.
• Opdracht gekregen om een selfie te maken met de opdrachtgever en die in Teams te posten.

Donderdag 27 november 2025

Sprint review met de opdrachtgever. Alles gepresenteerd en feedback verzameld voor de volgende sprint.

Vrijdag 28 november 2025

Overzicht van mijn kennis tot nu toe

• Ik weet hoe ik met GitHub iteratief kan werken, issues en sub-issues gebruik en wat een fork, clone, commit, push, pull, merge en conflict zijn. 🤓
• Ik weet wat HTML-elementen, tags en attributen zijn, hoe ik mijn HTML valideer, en wat CSS-selectors, properties, values, units en combinators zijn. 🤓
• Ik weet hoe ik Figma gebruik voor variatie, hoe ik prototypes maak en wanneer ik overstap naar code. 🍗
• Ik ken alle CSS Layout Modes, kan bepalen welke ik wanneer inzet en ze combineren. 🤓
• Ik weet wat de WCAG-richtlijnen zijn, hoe ik automatische en handmatige audits uitvoer en resultaten verwerk. 🤓🍗
• Ik weet hoe ik met alleen HTML een prototype maak en waarom een robuust fundament belangrijk is. 🍗
• Ik ontwerp Mobile First, herken dit in CSS, en weet hoe CSS nesting hierbij helpt. 🤓🍗
• Ik ken regels voor leesbaarheid, typografie en wanneer ik welke CSS-properties en units inzet. 🤓🍗
• Ik weet hoe kleurcontrast werkt voor hiërarchie en toegankelijkheid en hoe ik dit test en verbeter. 🤓
• Ik weet hoe ik een Readme en Wiki schrijf, Markdown toepas en presenteer tijdens een Sprint Review. 🍗
• Ik weet wat specificity, cascade en inheritance betekenen en kan dit uitleggen met een schets. 😅
• Ik kan Gestaltwetten benoemen en toepassen om ontwerpen te verbeteren. 😅🤓
• Ik weet hoe ik formulieren opbouw, validatie toevoeg en states style, en het verschil tussen labels en placeholders. 🫣
• Ik weet wat CSS Custom Properties zijn, waarom ze zo heten, en hoe ze dynamisch samenwerken met cascade en specificity. 🤓
• Ik ken de basis van programmeren: variabelen, functies, loops, datatypes, en het verschil tussen imperatieve en declaratieve talen. 🫣
• Ik weet wat keyframe-animaties zijn, wanneer ik transitions of animaties gebruik en hoe. 🫣
• Ik begrijp het verschil tussen feedback en feedforward in UI en hoe duidelijke labels daarbij helpen. 🫣
• Ik weet wat een gebruikerstest is, hoe ik een test voorbereid en hoe ik bruikbare resultaten verzamel door observatie. 🫣
• Ik weet hoe ik met JavaScript via het DOM (querySelector, addEventListener, classList) micro-interacties toevoeg. 🫣
• Ik weet wat UI-events en event-properties zijn en wat een callbackfunctie is. 🫣

Maandag 1 december 2025

Daily Checkout

• Drie leervragen op basis van de stof van vandaag:
  1. Hoe kan ik JavaScript-interacties beter structureren met het 3-stappenplan?
  2. Hoe weet ik wanneer ik welke DOM-selector moet gebruiken?
  3. Hoe kan ik fouten sneller vinden en oplossen met de console?
• Welke JS-begrippen moet ik nog oefenen?
  • event.target en event bubbling
  • Verschil tussen querySelector en querySelectorAll
  • Functies met parameters binnen event listeners
  Deze ga ik verder oefenen in de JS Fundamentals deeltaak.

Woensdag 3 december 2025

Daily Checkout

• De workshop bestond uit drie opdrachten: de Console, het 3-stappenplan, en van Comments naar Code. Ik heb opdracht 3 bijna af: mijn hamburgermenu werkt via het 3-stappenplan (selecteren → event → actie). Ik moet alleen nog testen of alles correct opent op mobiel.
• Bij de JS Fundamentals-deeltaak heb ik geleerd hoe DOM-selecties werken, hoe een eventListener en callbackfunctie samenwerken, en hoe classList.toggle zorgt voor interactie zoals een menu dat open- en dichtklapt.
• DoD toegevoegd: “Je hebt aan de hand van een user story en wireflow een interactie ontworpen.” Gelinkt in Portflow met screenshots van user story, wireflow en breakdown.

Maandag 8 december 2025

Daily Checkout – UI Events

• Vandaag heb ik uitleg gekregen over UI-events en hoe gebruikersinteractie werkt in JavaScript. We hebben gekeken naar events zoals click, input en change, en hoe deze worden gekoppeld met addEventListener.
• Ik heb geleerd dat een interactie altijd volgens een vast patroon werkt: element selecteren → event luisteren → actie uitvoeren. Dit 3-stappenplan helpt mij om mijn JavaScript overzichtelijk en logisch op te bouwen.
• In de checkout heb ik nagedacht over welke UI-events ik kan toepassen in de opdracht voor de opdrachtgever, zoals het openen en sluiten van een menu en het geven van visuele feedback na een klik.
• Ik heb hiervoor een eerste user story bedacht:
  “Als gebruiker wil ik duidelijke feedback krijgen wanneer ik op een element klik, zodat ik begrijp wat er gebeurt op de website.”
• Tijdens deze les is een foto gemaakt van het checkout-scherm ter documentatie voor mijn Learning Journal.

Woensdag 10 december 2025

Daily Checkout

• Iets wat ik nog niet wist:
  • HTML:
    Ik wist nog niet dat semantische elementen zoals button automatisch betere toegankelijkheid bieden dan een div met een click-event.
  • CSS:
    Ik heb geleerd dat :focus-visible beter is dan :focus, omdat het alleen zichtbaar wordt bij toetsenbordgebruik.
  • JavaScript:
    Ik snap nu beter hoe event.target werkt en waarom dit belangrijk is bij meerdere interactieve elementen.
• Wat ga ik voor vrijdag nog toevoegen?
  Ik ga mijn interactie uitbreiden met duidelijke states (open/gesloten) en controleren of alles logisch werkt zonder muis.
• Wat ga ik vrijdag testen?
  Ik ga testen of gebruikers zonder uitleg begrijpen wat ze kunnen doen en of mijn interactie intuïtief genoeg is.
• Favoriete browser:
  Mijn favoriete browser is Chrome vanwege de DevTools. Ik ga Firefox vaker gebruiken om verschillen tussen browsers te testen.
• Doordenker:
  Meerdere browsers zijn goed voor eindgebruikers omdat dit innovatie stimuleert, voorkomt dat één partij het web bepaalt en zorgt voor betere toegankelijkheid.

Vrijdag 12 december 2025

Daily Checkout – User Test (Sprint 5)

• Hoe ging het testen met een testpersoon?
  Het lukte goed om de testpersoon hardop te laten denken. Ik heb geprobeerd zo min mogelijk in te grijpen en geen sturende vragen te stellen. Hierdoor kreeg ik eerlijkere feedback.
• Wat ging goed en wat kan beter?
  Wat goed ging, was dat de gebruiker de hoofdfunctie snel begreep. Wat ik volgende keer beter wil doen, is vooraf duidelijkere instructies geven en mezelf nog meer op de achtergrond houden.
• Hoe ging de tweede user test?
  De tweede test liet zien dat mijn aanpassingen effect hadden: de interactie was duidelijker en zorgde voor minder verwarring. Er kwamen nog kleine verbeterpunten uit, zoals betere labels en visuele feedback.
• Verbeterpunten voor volgende week:
  • Duidelijkere feedback na een klik
  • Beter zichtbare focus-states
  • Consistentere benaming van knoppen

Mijn werk voor de user test heb ik toegevoegd aan Portflow met de titel:
“Sprint 5 – Je hebt aan de hand van een testplan een user test gedaan, de testresultaten gebruikt voor een nieuwe versie, en opnieuw getest.”

Maandag 15 december 2025

Learning Journal – Navigeren / Labels

• In de les kregen we de opdracht: “Beantwoord deze vragen in je Learning Journal.”
• Ik heb drie studievraag genoteerd over navigeren en labels. Dit zijn moeilijke proefwerkvragen die ik na vandaag moet kunnen beantwoorden.
• Ik heb gereflecteerd op de opdracht Opdracht User test bespreken en de feedback verwerkt in de issues van ons project.
• We hebben vooruitgekeken naar woensdag: tijdens de wrap-up gaan we de laatste sprint review voorbereiden, de retrospect voorbereiden en de code-demo’s voor vrijdag (PARTY) klaarzetten – ook als je dinsdag de sprint review hebt.

Maandag 5 januari 2026

Wat zijn je goede voornemens voor dit jaar

• Ik wil nieuwe technieken zoals clamp of container queries leren.
• Feedback vragen aan andere studenten of docenten of gewoon mensen in het algemeen.

Woensdag 14 januari 2026

Daily Checkout – Animatie ontwerpen

Tijdens de checkout kregen we het onderwerp Animatie ontwerpen. Op het scherm stond dat we moesten dubbelchecken welk animatieprincipe we hebben opgenomen in onze User Story issue. Daarnaast moesten we in onze Learning Journal drie nieuwe CSS-properties beschrijven, twee Disney-animatieprincipes noemen die we nog niet helemaal begrijpen, en één animatieprincipe kiezen dat we later toevoegen aan onze persoonlijke website (assessment week).

Dubbelcheck: welk animatieprincipe heb ik opgenomen in mijn User Story issue?

Ik heb het animatieprincipe Feedback opgenomen. Dit betekent dat de gebruiker direct visuele terugkoppeling krijgt na een actie (bijvoorbeeld een knop die kort “active” aanvoelt, een menu dat soepel open/dicht gaat, of een succes-state na een klik). Hierdoor begrijpt de gebruiker beter wat er gebeurt.

3 nieuwe CSS-properties die ik nog niet (goed) kende

1. animation-fill-mode
   Hiermee bepaal je wat er met de styles gebeurt voor en na de animatie. Handig als je wilt dat een element in de eindpositie blijft staan (bijv. forwards).
2. animation-play-state
   Hiermee kun je een animatie pauzeren of weer starten (paused / running). Dit is handig voor interactieve animaties, zoals pauzeren bij hover of via JavaScript.
3. transform-origin
   Hiermee bepaal je het “draaipunt” van een transform (zoals rotate/scale). Dit maakt animaties natuurlijker, bijvoorbeeld een deur die vanaf de zijkant openzwaait.

2 Disney-animatieprincipes die ik nog niet helemaal begrijp

• Follow Through / Overlapping Action
  Ik snap het idee, maar ik vind het lastig om te bepalen hoeveel “nabeweging” nog prettig is in UI-animaties zonder dat het te druk wordt.
• Arcs
  Ik begrijp dat beweging vaak in een boog gaat (natuurlijker dan rechte lijnen), maar ik weet nog niet goed hoe ik dit praktisch toepas in web-animaties (CSS/JS).

1 animatieprincipe dat ik ga toevoegen aan mijn persoonlijke website (assessment week)

Ik wil het principe Easing (Timing / Spacing) toevoegen aan mijn persoonlijke website. Dus niet “snelle harde” bewegingen, maar vloeiende overgangen met bijvoorbeeld ease-out of een cubic-bezier().

Vrijdag 16 januari 2026

Daily Checkout – Sprint 6

Tijdens de les werd het checkout-scherm getoond met reflectievragen voor Sprint 6. Op het scherm stond dat we moesten terugkijken op de User Test uit sprint 5, benoemen wat er verbeterd is, en vooruitkijken naar de planning en roadmap.

Wat heb ik meegenomen uit de User Test van sprint 5?

• Ik heb geleerd dat gebruikers duidelijke visuele feedback nodig hebben na een klik.
• Labels en benamingen moeten consistenter zijn om verwarring te voorkomen.
• Focus-states zijn belangrijk voor toetsenbordgebruik en toegankelijkheid.

Planning Roadmap

• Een laatste testmoment met een gebruiker
• Feedback verwerken in code en documentatie
• Controle op toegankelijkheid en consistentie

Maandag 19 januari 2026

Daily Checkout – Code conventies / refactoring

Met welke code conventies heb ik nog moeite? Hoe komt dat?

Ik heb soms nog moeite met het consequent toepassen van code conventies, vooral bij grotere bestanden. Dan vergeet ik soms om alles netjes te groeperen of om dezelfde naamgeving overal door te voeren.

Hoeveel tijd zou ik in een sprint moeten plannen voor refactoring?

Ik denk dat het realistisch is om tijdens een sprint ongeveer 20 tot 30 procent van mijn tijd te reserveren voor refactoring.

Woensdag 21 januari 2026

Daily Checkout – CSS Tricks

Vandaag heb ik gewerkt met één van de vijf CSS-tricks die we hebben besproken. Ik heb specifiek de trick “Mobiele hoogte fixen met dvh” toegepast en onderzocht in mijn project.

Oplossing

height: 100vh;
height: 100dvh;

Uitleg: dvh (dynamic viewport height) houdt rekening met de dynamische hoogte van de browser op mobiel.

Vrijdag 23 januari 2026

Overzicht van mijn kennis tot nu toe

• Ik weet hoe ik met GitHub iteratief kan werken (fork, clone, commit, push/pull, merge, conflicts). 🍗
• Ik weet hoe HTML en CSS werken (structuur, selectors, units, combinators). 🍗
• Ik kan layout modes kiezen en combineren (Grid/Flex). 🤓
• Ik weet wat WCAG is en hoe ik audits kan doen. 🍗
• Ik kan met JavaScript DOM selecteren en events gebruiken (querySelector, addEventListener, classList). 🤓

Maandag 2 Februari 2026

Mini quiz

• Met / kan je bestanden linken.
• Wanneer je iets hebt gecommit of als iets niet werkt.
• Control + C klikken.
• Ik denk het niet, ik weet het niet zeker.
• Control + of gewoon rechtsboven een icoon die de tweede van links is.
• Er staan veel mapjes met meer mapjes met content die ik niet snap.
• Geen denk ik.

Bronnen:

• Liquid intro
• Liquid filters
• Express API
• Render
• MDN client-server overview
• MDN Express intro
• Node.js
• YouTube video
• Render deploys docs
• Render troubleshooting deploys

Woensdag 11 februari 2026

Daily Checkout – Vragen (Liquid + URL)

• Wat is een query parameter?
  Een query parameter is extra info in een URL. Het staat achter een ?.
  Bijvoorbeeld: /student?id=12. Dan is id=12 de query parameter.
• Op wat voor soort data kun je for loops gebruiken?
  Vooral op lijsten/arrays. Dus als je meerdere dingen hebt, zoals studenten, squads of producten. Dan kan je met een loop alles laten zien zonder alles 1 voor 1 te typen.
• Welke Liquid tags ken je inmiddels?
  Ik ken nu vooral: {% raw %}{% if %}{% endraw %}, {% raw %}{% else %}{% endraw %}, {% raw %}{% endif %}{% endraw %}, {% raw %}{% for %}{% endraw %}, {% raw %}{% endfor %}{% endraw %}, en {% raw %}{% assign %}{% endraw %}.
• Welke Liquid filters heb je al gebruikt?
  Ik heb bijvoorbeeld deze gebruikt: | upcase, | downcase, | capitalize, | default en soms | size.
• Wat versta jij onder URL design en nette URL’s?
  Nette URL’s zijn gewoon duidelijk en makkelijk te lezen, zoals: /student/12 of /squad/fdnd.
• Wat vind je lelijke URL’s?
  Lelijke URL’s zijn van die lange urls met allemaal rare dingen erin, zoals: /page?id=12&ref=abc&session=999. Dat ziet er rommelig uit.

Vrijdag 13 februari 2026

Daily Checkout – Kill Your Darlings (Reflectie)

• Wat heb je geleerd tijdens deze code review?
  Ik heb geleerd dat mijn code netter kan door betere structuur en duidelijkere namen te gebruiken. Ook heb ik geleerd om minder dingen dubbel te doen en meer consistent te werken.
• Hoe is het om volgende week opnieuw te beginnen met een gezamenlijke squadpage?
  Ik vind het eigenlijk wel prima, want nu snappen we beter hoe we moeten samenwerken. We kunnen sneller beginnen en meteen een goede basis maken.
• Wat wil je meenemen uit jouw huidige squadpage? Waar ben je trots op?
  Ik wil meenemen dat ik mijn site echt goed heb kunnen maken en ik ben blij ermee. Het is gewoon heel nice uitgekomen. Ik ben ook trots dat ik dingen heb gebouwd met Grid/Flex en dat ik data kon laten zien met loops.