Sprint 4 ‐ Look & Feel - lynnvdbo/i-love-web GitHub Wiki

Stylguide 10-11-25

Schrijf 3 dingen op die je vandaag hebt geleerd

  1. Wat een Interface inventory is
  2. Hoe en wat een gezamelijke huisstijl is en hoe je er een maakt
  3. Weet een nieuwe sidemap maken

Voeg links toe aan je Learning Journal met interessante voorbeelden en bronnen uit de slides en workshops

https://bradfrost.com/blog/post/interface-inventory/

https://www.figma.com/resource-library/what-is-a-style-guide/

Check de memes in het sprint 4 kanaal en voeg de leukste toe aan je Learning Journal

Stylesheet 13-11-25

Schrijf 3 dingen op die je vandaag geleerd hebt over CSS

  1. Gezamelijke CSS schrijven van de stylguide in de stylesheet
  2. De gezamelijke stylesheet in je eigen reposetory toevoegen
  3. Custom propeties

Voeg links toe aan je Learning Journal met interessante voorbeelden en bronnen uit de slides, workshops en CSS quiz

https://css-tricks.com/a-complete-guide-to-custom-properties/

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties)](https://github.com/fdnd-task/look-and-feel-corporate-identity/blob/main/docs/stylesheet.md

Scrijf op in welke nieuwe CSS feature jij de komende tijd wil gaan verdiepen

Custom propeties

Code/Design review Styleguide 14-11-25

Welke feedback heb je gegeven aan een ander team?

Dat ze font-sizes in hun root kunnen zetten en dat de fontface en univarsal boven in de code horen te staan.

Wat heb je gezien bij een ander team wat in de gezamelijke styleguide opgenomen gaat worden?

Dat ze de kleuren in HSL hebben verwerkt en erbij gezet. Dit hebben wij nu ook toegepast, want eerst hadden hij hex.

Je hebt (als het goed is) issues assigned gekregen; wanneer ga je deze issues verwerken?

Ik ga deze issue in het weekend of maandag verwerken.

Typografie en leesbaarheid 17-11-25

Veel geleerd vandaag? Verwerk je aantekeningen in je Learning Journal

Deze begrippen zijn langsgekomen, ken je ze nu? Leg ze uit

  1. Basisregels voor goede leesbare teksten Font size min 16px Lijn hoogte 1.4

  2. Font stack

  3. Font-family; serif, sans-serif, monospace,..(nog meer?)

  4. @FontFace Als je een eigen gedownloadde font wilt toevoegen kan dat met fontface

  5. Hyphens

  6. Absolute length units, Font-relative length units, viewport realtive untis

Hoe ga je het onderdeel over "Hoe leze we?' toepassen op je opdracht? Lees even terug en maak zo nodig issues

Form & States 19-11-25

Beantwoord deze vragen over formulieren in je Learning Journal

Maak een HTML file in je learning journal, noem het "form-types-and-attributes.html". voeg de vragen met de antwoorden toe. Maak per vraag een demo'tje om het te onderzoeken en te laten zien. Test bijvoorbeeld hoe het wel goed is en wat er gebeurt als je iets niet doet.

Waarom heeft elk input een label nodig?

Elk invoerveld heeft een label nodig voor toegankelijkheid, bruikbaarheid en duidelijkheid

Wat doe je met de attributen type, autocomplete, inputmode en enterkeyhint?

  • Wat doen fieldsets en legends in een formulier?

Wat doen required, , min, max, step?

Required zorgt ervoor dat het een verplicht veld is die je moet invullen. Zodra iemand het niet invult kan diegen het formulier niet verzenden.

Maxlength houdt in dat diegene die het formulier wilt invullen een max aan woorden kan typen, dus als je maxlength 30 zegt kunnen er niet meer dan 30 woorden ingevuld worden.

Min, Max step ....

  • Welke input pseudo-classes ken je nog niet? Maak met allemaal een demo'tje

Voeg de DoD "Je hebt een formulier met verschillende formulier elementen ontworpen en gemaakt" toe aan Portflow.

Code/Design Review 21-11-25

Beantwoord deze vragen over de Code/Design Review in je learning journal.

Maak je genoeg gebruik van de gezamelijke stylesheet?

Ja ik maak genoeg gebruik van de gezamelijke stylesheet. Ik kan alleen voor de kleuren wit en zwart nog wel de custom propeties toevoegen.

Benoem twee voorbeelden hoe je gebruik maakt van de cascade?

De "cascade" is het principe dat bepaalt welke CSS-regel uiteindelijk wordt toegepast op een webpagina-element.

Schrijf custom propeties op die je gebruikt in je eigen repo van de gezamelijke stylsheet.

  1. var(--primary-color)
  2. var(--font-size-xs)
  3. var(--font-family)

*Heb je door de code/design review verbeterpunten gevonden voor de gezamelijke stylesheet? Welke issues zijn er op de gezamelijke repo ingeschoten (op basis van jouw werk)?

Voeg de Dod "Je maakt gebruik van de gedeelde stylsheet, de CSS cascade specificity en custom propeties" toe aan Portflow.

Layout & Competities 23-11-25

Bewaar de verschillende bronnen uit de workshop in je learning journal, noteer per bron waar het over gaat en link naar de voorbeelden die je hebt gemaakt of gaat maken.

De linkjes gaan over de verschillende gestaltes

  1. Law of Common Region: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

https://lawsofux.com/law-of-proximity/

[Proximity Principle in Visual Design, by Aurora Harley](https://www.nngroup.com/articles/gestalt-proximity/)

Gestalt Principles of Design — Proximity, by Christopher Butler

  1. Law of Commen Region: Objects that are near, or proximate to each other, tend to be grouped together.

https://lawsofux.com/law-of-common-region/

The Principle of Common Region: Containers Create Groupings, by Aurora Harley

  1. Law of Similarity: The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated.

https://lawsofux.com/law-of-similarity/

The Principle of Common Region: Containers Create Groupings, by Aurora Harley

Noem 2 dingen die je nog wil leren

Voeg je DoD "Je hebt aantoonbaar gebruik gemaakt van Gestalt principes voor de layout compositie" toe aan je Portflow. Link bijvoorbeeld naar de issues die je hiervoor hebt aangemaakt.

Wrap Up 26-11-25

Wat was je code vraag, hoe heb je het opgelost? Link naar de oplossing.

Mijn codevraag was hoe je het navigatiemenu in de footer (met details en summery) helemaal laat zien op scheremen die groter zijn, zoals ipad en laptop.

Hoe ik heb het opgelost? Ik heb hulp gevraagd aan Sanne.

Vragenlijst zelftest 28-11-25

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. 🤓🍗

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

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. 🍗

Ik weet alle Layout Modes in CSS en eigenschappen van elke te benoemen, kan van (onderdelen van) een ontwerp bepalen welke ik inzet, en ze toepassen en combineren. 🤓

Ik weet wat de WCAG richtlijnen zijn, hoe ik een WCAG audit met automatische en handmatige tests doe, en hoe ik testresultaten kan verwerken. 🤓🍗

Ik weet hoe ik met alleen HTML een prototype van (een deel van) een ontwerp maak, en waarom een robuust fundament belangrijk is, voordat ik volgende lagen toevoeg. 🤓🍗

Ik weet hoe ik Mobile First ontwerp en ontwikkel, hoe ik dat kan herkennen in mijn CSS, hoe CSS nesting hierbij kan helpen, en wat het voordeel is van deze manier. 🍗

Ik weet verschillende regels voor leesbaarheid van tekst, hoe ik de typografie kan aanpassen met CSS, en welke properties en units ik wanneer in kan zetten. 🍗

Ik weet hoe kleurcontrast te maken heeft met visuele hiërarchie én met toegankelijkheid, en hoe ik dit kan testen en verbeteren. 🍗

Ik weet hoe ik een duidelijke Readme en Wiki kan opleveren, hoe ik Markdown hierin toe kan passen, hoe ik mijn werk aan een opdrachtgever presenteer tijdens een Sprint Review en hoe ik inhoudelijke feedback kan krijgen. 🤓🍗

Ik weet wat in CSS specificity, cascade en inheritance betekenen, en kan deze onderwerpen via een schets uitleggen aan iemand anders. 🫣😅

Ik weet verschillende Gestalt wetten te benoemen en kan ze inzetten om ontwerpen beter (of slechter) te maken. 🤓🍗

Ik weet hoe ik in HTML formulieren en formulierelementen maak, hoe ik validatieregels in HTML attributen meegeef, hoe ik verschillende states kan stylen met CSS en wat het verschil is tussen een placeholder en een label. 🤓

Ik weet wat Custom Properties in CSS zijn, waarom ze zo heten, hoe je ze gebruikt en dynamisch inzet, en hoe ze samenwerken met specificity, cascade en inheritance. 😅🤓

Ik weet de basis van programmeren, zoals variabelen, functies, loops en data types, en ik weet wat het verschil is tussen een imperatieve taal en een declaratieve taal. 🫣

Ik weet wat keyframe animaties in CSS zijn, hoe je ze kunt gebruiken, hoe ze verschillen van transitions, en wanneer je wat inzet. 🫣

Ik weet het verschil tussen feedback en feedforward in een User Interface, hoe die samenwerken, en hoe duidelijke labels de User Interface beter kunnen maken. 🍗

Ik weet wat een gebruikerstest is, hoe je deze voorbereidt, en hoe je met een user story, testplan, scenario en observeren tot bruikbare testresultaten komt. 🫣

Ik weet hoe ik in JavaScript via het Document Object Model met querySelector, addEventListener en classList micro-interacties toe kan voegen aan mijn website. 🫣

Ik weet wat UI events en event properties zijn, hoe ik verschillende UI events in JavaScript kan gebruiken, en wat een callback functie is. 🫣