S4W2 · Look and feel

Workshop Sketchnoting

maandag 21 november 2022

Nadat de rook was opgetrokken van afgelopen week ging ik met nieuwe energie en een optimistische blik deze week te gemoed. Geen tijd om bij de pakken neer te zitten maar doorgaan. We begonnen deze week met een workshop Sketchnoting. Oftewel gedachtes visueel en grafisch vastleggen op papier. Wat deze opdracht speciaal maakte was het doel om ons proces van afgelopen sprints in beeld te brengen door middel van een metafoor.

Na de workshop kwamen we met alle aanwezigen van het project samen om de week te bespreken. Wie ging wat op zich nemen deze week. Hier gingen we iedereen persoonlijk langs.

Differentiatie

dinsdag 22 november 2022

Vandaag tijdens deze differentiatie dag kregen we een uitleg hoe je makkelijk kan samenwerken en code kan pushen in Github zonder merge conflicten te krijgen. Ook vertelde ze hoe je slim en efficiënt kan coderen om overschrijvingen kan voorkomen en hiërarchie kan toepassen. Bijvoorbeeld voor het opmaken van een header: .page-header .page-header__nav .page-header__nav__item toe te kennen om een universele structuur aan te brengen zodat andere developers makkelijk kunnen instappen in jouw geschreven code.

Workshop CSS voor styleguides

woensdag 23 november 2022

Woensdag startten we de dag met het college over custom properties, container queries en structuur. Custom properties had ik nog niet goed door dat het staat voor var() values om herhaling te voorkomen. Don't Repeat Yourself of Write Everything Twice (DRY & WET methode) hangt over deze methode en zorgt ervoor dat wij developers efficiënter kunnen coderen om twee redenen. Een vanwege het feit dat het minder typen is en twee dat we alle instellingen op een locatie hebben staan zodat we sneller en dynamischer aanpassingen kunnen maken.

Voor de deeltaak Styleguide had ik Tim geholpen de navigatie op de styleguide responsive weten te maken. Op mobiel en tablet wilden we de items horizontaal laten scrollen wat minder moeite kost. De dilemma was dat de items niet op een lijn wilden staan. Hier liep hij tegenaan maar ik wist hem hiermee te helpen om de parent element de volgende properties te geven: display: flex om de onderliggende elementen flexibel te maken en flex-direction: column in te stellen dat alle items op een kolom te krijgen. Dit werkte!

Tot slot heb ik geprobeerd mijn pagina (layout.html) af te krijgen. Voor vandaag hadden alle vier de elementen een voortoning moeten krijgen hoe het visueel eruit ziet per apparaat en hoe het is opgebouwd in html en css.

Differentiatie

donderdag 24 november 2022

Code/Design-review over CSS & We ♥ Web met Mikey Casalaina

vrijdag 25 november 2022