Dag 56 (18 november 2024)

• Wat heb ik vandaag gedaan?

In de ochtend hebben we een workshop gekregen over lettertypes. Hierin hebben uitleg gekregen over het juist toepassen van fontfaces, wat schreef en schrijf letters zijn en het verschil tussen de waardes em en rem. Aan het eind van de workshop hebben we onze eigen font gemaakt.

Link naar experimenteren met units: https://github.com/ambersr/look-and-feel-corporate-identity/blob/main/font.html

Aantekeningen van de workshop:

• Schrijf drie dingen op die je geleerd hebt.

1. Wat css units zijn en wat verschil hier tussen is.
2. Hoe je een fontface juist moet toepassen.
3. Rem is de fontsize vanuit de root.

• Schrijf op wat je nu gaat doen.

Ik ga vanaf vanmiddag aan de slag met de stylesheet implementeren op de leertaak 'corporate identity'. Daarnaast ga ik alvast een begin maken aan de eerste sectie van de geveltuin pagina. Woensdag wil ik de geveltuin pagina afronden en donderdag starten met schetsen en een high fi ontwerp van de 2e pagina.

Dag 58 (20 november 2024)

• Beschrijf 3 dingen die je geleerd hebt over HTML, en link naar goede bronnen.

1. Required -> Dit element zorgt ervoor dat formulier velden verplicht worden. Ook dit kan je stylen in CSS. Linkje naar de bron die ik nodig had: https://developer.mozilla.org/en-US/docs/Web/CSS/:required

2. Label -> Voor toegankelijkheid voeg altijd een label toe aan je formulier. Linkje naar de bron die ik nodig had:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

3. Input types -> In formulieren gebruik je verschillende input types zoals 'text' of 'range'. Dit geeft het soort formulier veld aan. Linkje naar de bron die ik nodig had: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

• Beschrijf 3 dingen die je geleerd hebt over CSS, en link naar goede bronnen.

1. Dat je het element required kan stylen in CSS. Linkje naar de bron: https://www.w3schools.com/cssref/tryit.php?filename=trycss_sel_required
2. Dat je het element :user-valid kan stylen in CSS. Linkje naar de bron: https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
3. Dat je een input element een styling van een max length kan geven. Dit zorgt ervoor dat er max een aantal woorden te zien zijn in het veld. Link je naar de bron: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength

• Beschrijf voor beide onderwerpen iets dat je kunt gebruiken en gaat toepassen in de leertaak.

Vandaag heb ik een issue aangemaakt waarin ik het element required wil toevoegen. Bij het toevoegen van het element in HTML heb ik ook hiervoor gelijk de styling toegepast in CSS. Linkje naar de bron: https://developer.mozilla.org/en-US/docs/Web/CSS/:required.

Aantekeningen workshop:

Dag 59 (21 oktober 2024)

• Wat heb ik vandaag gedaan?

Vandaag ben ik bezig geweest met het maken van schetsen en een high fi ontwerp in figma van de contactpagina. Dit heb ontworpen voor verschillende schermbreedtes, desktop, tablet en mobiel. Na het maken van het high fi ontwerp heb ik een breakdown schets gemaakt. (Zie afbeeldingen)

Moodboard:

Schetsen:

High fi ontwerp in Figma:

Breakdownschets:

Dag 60 (22 oktober 2024)

• Wat heb ik vandaag gedaan?

Vandaag hebben we een code/design review gehad over de styleguide. Samen met mijn Bieb in Bloei team hebben we 2 andere teams hun styleguide beoordeeld. We hebben bijvoorbeeld gekeken naar de opbouw van het bestand en benaming van classes en variabelen. Na het reviewen van de andere teams hebben we naar onze eigen reviews gekeken en deze als taken verdeeld onder elkaar. (zie afbeelding)