forked from fdnd-task/i-love-web
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsemester1.html
2014 lines (1778 loc) · 147 KB
/
semester1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Love Web - Semester 1</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/sprint-divider.css">
</head>
<body>
<main class="semester_page">
<header class="main_grid">
<div></div>
<div class="header_container">
<a href="./index.html">
<figure class="logo_container">
<img src="./assets/img/divani.png" alt="">
</figure>
</a>
<div class="title_container">
<h1>I Love Web</h1>
</div>
<nav>
<ul>
<li>
<div class="dropdown">
<a href="" class="buttonheader">
Semesters
</a>
<div class="dropdown-content">
<a href="./semester1.html" class="dropdownlink">Semester 1</a>
<a href="./semester2.html" class="dropdownlink">Semester 2</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div></div>
</header>
<div class="sections_container_outer main_grid">
<div></div>
<div class="sections_container">
<section class="i_love_web_section note-section-container">
<div class="blocks-container">
<section class="blocks-group sticky-buttons">
<div class="buttons">
<a href="#s1" class="button">Sprint 1</a>
<a href="#s2" class="button">Sprint 2</a>
<a href="#s3" class="button">Sprint 3</a>
<a href="#s4" class="button">Sprint 4</a>
<a href="#s5" class="button">Sprint 5</a>
<a href="#s6" class="button">Sprint 6</a>
</div>
</section>
<section class="blocks-group sprint-divider">
<div class="anchor" id="s1"></div>
<h2>
SPRINT 1
<span>Your Tribe</span>
</h2>
</section>
<article class="blocks-group note-group">
<h2>My Tribe</h2>
<p>Voor deze opdracht moesten we een online visitekaartje maken in je eigen stijl.</p>
<h3>Waar heb ik voor gekozen?</h3>
<p>Ik heb gekozen om een layout te maken waar in de linkerkant een menu te vinden is met
buttons waardoor het gedeelte rechts beperkt is qua hogote en er geen nieuwe
pagina's nodig zijn.</p>
<h3>Waar liep ik tegen aan?</h3>
<p>Aan het begin stonden mijn scss -> css watch instellingen nog niet helemaal goed,
dus
dit duurde even voordat mijn scss goed gecompiled werdt naar css code.
Daarnaast waren sommige stukke content niet selecteerbaar. Dit heb ik opgelost met
de
volgende code:
</p>
<pre class="ilw_codeblock"><code>
<!-- -->.wrapper{
<!-- --> opacity: 0;
<!-- --> padding: 24px;
<!-- --> width: 100%;
<!-- --> box-sizing: border-box;
<!-- --> position: absolute;
<!-- --> top: 0;
<!-- --> height: 100%;
<!-- --> &.active{
<!-- --> opacity: 1;
<!-- --> z-index: 99;
<!-- --> overflow: auto;
<!-- --> }
<!-- -->}
</code></pre>
<p>Met behulp van een hoge z-index op de actieve wrapper valt deze over alle blokken
heen,
waardoor alleen deze tekst selecteerbaar is.</p>
<h4>04-09-2024 Shortened Some Code</h4>
<p>Er bestond een functie die na een page load de eerste button en wrapper active class
geeft. Later bedacht ik me dat ik simpelweg in de HTML deze handmatig een active
class
kan geven. Dit is voor nu beter aangezien mijn menu nu niet dynamisch is, maar hard
in
de code staat. Mocht ik deze code later nog nodig hebben, dan weet ik hem te vinden
;)
</p>
<pre class="ilw_codeblock"><code>
<!-- -->.function setActiveTab(){
<!-- --> //At page load set the first tab
<!-- --> var $this = $('nav .nav_item').first();
<!-- --> let num = $this.data('giver');
<!-- --> $this.toggleClass("active")
<!-- --> let toshow = $('article .wrapper[data-receiver='+num+']');
<!-- --> toshow.toggleClass("active")
<!-- --> }
</code></pre>
<p></p>
<div class="buttons">
<a target="_blank" href="./assets/img/my-tribe-schets.jpeg" class="button">Klik om mijn schets te bekijken van deze site</a>
<a target="_blank" href="https://divaninl.github.io/your-tribe-profile-card/" class="button">Bekijk de site</a>
</div>
</article>
<article class="blocks-group note-group">
<h2>Talk Webtechnologie 03-09-2024</h2>
<h3>Wat heb ik voor nieuws
tijdens deze presentatie geleerd?</h3>
<ol>
<li>
<p>Voor mij vorheen nog onbekende CSS-selectors:
a[href$=".pdf"] - a elementen die een href hebben die de string
".pdf" bevat.
p::first-letter/line - de eerste letter of regel van een p tag wordt
getarget.
Hiervoor gebruikte ik normaal
een span-element</p>
</li>
<li>
<p>LCH kleuren - een nieuw kleurenmodel die kleuren weergeeft die meer
overeenkomen
met hoe het menselijk oog
deze weergeeft.</p>
</li>
</ol>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 04-09-2024</h2>
<h3>Schrijf kort op wat je vandaag hebt
gedaan</h3>
<ol>
<li>Bugs gefixet bij mijn tribe profile card</li>
<li>Schets van de tribe profile card uitgebreid met HTML Tags en wat css code.</li>
<li>I love webpagina geschetst.</li>
<li>I love web pagina geforked.</li>
</ol>
<h3>3 Studievragen</h3>
<ol>
<li>Wat is het nut van een breakdown schets?
Voor jezelf het denkvermogen verminderen tijdens het programmeren + zodat je een
beeld kan krijgen wat je wilt
maken</li>
<li>Waar moet je op letten als je een breakdown schets maakt?
Zoveel mogelijk elementen benoemen + alvast nadenken over css/js</li>
<li>Wat is het nut van een comment?
Zodat andere mensen je code beter kunnen begrijpen</li>
</ol>
<h3>TO DO:</h3>
<ul>
<li>Comments refinen op de my-tribe page</li>
<li>Met rode en groene pen de html + css benoemen op de schets van de i love web
page
</li>
<li>I love web pagina begin bouwen</li>
<li>Tekst maken over de Lessen van week 1 in markdowns:
(my tribe page (schetsen en bugs), presentatie basis html/css/js (wat heb ik
geleerd), i love web page schetsen)
</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 05-09-2024</h2>
<h3>Schrijf kort op wat je
vandaag hebt gedaan en nog gaat doen</h3>
<p>Ik ben vanochtend met een uitklapbare sidebar begonnen. Ik moet enkel nog twee icons
met
links toevoegen.</p>
<h3>Schrijf een aantal studievragen op:</h3>
<ol>
<li>Wat maakt JavaScript verschillend van HTML en CSS?</li>
</ol>
<blockquote>
<p>Met JavaScript maak je je website dynamisch en kan HTML en CSS veranderen op
basis
van acties en/of gebeurtenissen.</p>
</blockquote>
<ol>
<li>Wat van mijn HTML en CSS kennis kan ik hergebruiken binnen JavaScript?</li>
</ol>
<blockquote>
<p>Je hebt CSS-notaties nodig om elementen aan te spreken in JavaScript en het is
handig
om te weten hoe een HTML structuur werkt als je functies als
document.CreateElement
gaat gebruiken.</p>
</blockquote>
<ol>
<li>Wat ga ik verder vandaag nog doen met JavaScript?</li>
</ol>
<blockquote>
<p>Vandaag niks meer, het Javascript gedeelte van mijn uitvouwbare social media blok
op
mijn visitekaart werkt. Er zitten alleen nog wat bugs in de CSS en de HTML.</p>
</blockquote>
<h3>TO DO:</h3>
<ul>
<li>Journal omzetten naar HTML-stukken.</li>
<li>Zorgen dat de content van het uitvouwbare social media blok op de visitekaart
bugloos en gevuld is met content.</li>
<li>Foto's van schetsen maken en deze opslaan in mijn Cloud + mijn I Love Web
Repository</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 09-09-2024</h2>
<h3>Schrijf op wat je vandaag gedaan hebt</h3>
<p>Vandaag zijn we begonnen aan de Squadpage-opdracht.
Hiervoor hebben we een design geschetst + al onderzoek gedaan welke technieken we
willen gebruiken en hoe we ze willen gebruiken.</p>
<p>Drie dingen die ik vandaag geleerd heb:</p>
<ul>
<li>:focus-within</li>
<li>om minder jquery te gebruiken</li>
<li>Verschill tussen a- en button-tags, wanneer je beide gebruikt</li>
</ul>
<h3>Schrijf 2 dingen die je interessant vind:</h3>
<ul>
<li>CSS Grid layout</li>
<li>Verschill tussen a- en button-tags, wanneer je beide gebruikt</li>
</ul>
<h3>Schrijf 1 ding waar je nog vragen over hebt</h3>
<ul>
<li>CSS Grid layout</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 10-09-2024</h2>
<h3>Schrijf op wat je vandaag gedaan hebt</h3>
<p>Vandaag hebben we de basics geleerd van CSS grids</p>
<p>Drie dingen die ik vandaag geleerd heb:</p>
<ul>
<li>verschil tussen grid layouts met alleen afmetingen + areas</li>
<li>grid-column/row: 1/-1 (-1 is de laatste)</li>
<li>gebruik align en justify self</li>
</ul>
<h3>Schrijf 2 dingen die je interessant vind:</h3>
<ul>
<li>grid-column/row: 1/-1 (-1 is de laatste)</li>
<li>Responsive grid layouts</li>
</ul>
<h3>Schrijf 1 ding waar je nog vragen over hebt</h3>
<ul>
<li>PRE CODE tags in je html zonder whitespacing</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 11-09-2024</h2>
<h3>Schrijf kort op wat je vandaag hebt gedaan, en nog gaat doen.</h3>
<p>Vandaag hebben we media queries besproken en online onderzocht hoe dit gebruikt wordt</p>
<p>Vandaag ga ik verder nog in mijn i-love-web pagina de volgende wijzigingen doorvoeren</p>
<ul>
<li>SCSS slopen en CSS nesten (geleerd van Justus dat dit nu mogelijk is)</li>
<li>CSS grid gebruiken voor layouts ipv margin: auto</li>
</ul>
<p>Verder ga ik nog werken aan de my squad page. Hiervoor ga ik het volgende doen</p>
<ul>
<li>Grid layout maken voor de campusblokken</li>
<li>Hier ook een desktop versie voor bouwen</li>
</ul>
<h3>Schrijf drie studievragen op</h3>
<ul>
<li>Hoe kan ik bij <code> en <pre> tags ervoor zorgen dat ik mijn code niet links in de html hoef te plaatsen maar wel tabjes kan gebruiken?</li>
<li>is min-width altijd beter dan max-width (mobile-first)</li>
</ul>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s1-weloveweb"></div>
<h2>Talk We ❤️ Web [13-09-2024]</h2>
<p>Deze vrijdag kregen we een lezing van Vasilis van Gemert (expert in het maken van html-klokken)</p><br>
<p>Vasilis van Gemert benadrukt in zijn lezing dat hij het leuk vindt om soms nutteloze dingen te maken en hoe tegenwoordig veel websites op elkaar lijken. Volgens hem is het belangrijk dat websites toegankelijk zijn voor iedereen. Daarnaast vindt hij dat je je creativiteit de vrije loop moet laten en leuke animaties kunt toevoegen om een website dynamischer en aantrekkelijker te maken, zonder de toegankelijkheid uit het oog te verliezen.
Een van zijn kernpunten is dat het web niet alleen functioneel moet zijn, maar ook plezier en ervaring moet bieden aan de gebruiker.
</p>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 16-09-2024</h2>
<h3>Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.</h3>
<p>Vandaag hebben we de basics geleerd van Figma, hier wat oefeningen mee gemaakt. Ook hebben we uitleg gekregen
over visuele hiërarchie en hoe je kan toepassen in je design.</p>
<h3>Schrijf 3 dingen die je geleerd hebt:</h3><br>
<p>
<strong>1. Ik heb vandaag geleerd hoe je visuele hiërarchie bereikt.</strong>
</p>
<p>
Je kan dit bereiken door elementen te laten verschillen in de volgende eigenschappen.
</p>
<ul>
<li><strong>Grootte</strong>
<p>Een groter element zal meer opvallen. hierdoor wordt er eerder naar gekeken worden of een interactie mee
uitgevoerd.</p>
</li>
<li><strong>Kleurcontrast (warm + koud kleuren)</strong>
<p>Je kan spelen met warme en koude kleuren. Als je website veel koude kleuren bevat, kan je één element
laten
opvallen door deze warme kleuren te geven.</p>
</li>
<li><strong>Witruimte en positie</strong>
<p>Een element wat gecentreerd is en/of wat meer witruimte om zich heen heeft, zal meer opvallen</p>
</li>
<li><strong>Animatie</strong>
<p>Een element wat animeert zal meer opvallen dan non-geanimeerde elementen</p>
</li>
</ul><br>
<p><strong>2. Wat is belangrijk, wat prioriteer je in je design?</strong></p>
<p>
Als je een design maakt, zorg je ervoor dat de belangrijke informatie eerder gelezen wordt. Je kan
bovenstaande technieken toepassen om belangrijke elementen te laten opvallen.
Als eerste moeten belangrijkste informatie gelezen worden. Daarna de belangrijkste details en als laatste de
achtergrondinfo.
</p><br>
<p><strong>3. Hoe werk je met Figma? </strong></p>
<p>We hebben vandaag oefeningen gedaan met Figma. Hierbij leerden we ook belangrijke shortcodes.
Dit waren onder andere:</p>
<ul>
<li>alt gebruiken om elementen speciaal groter te maken.</li>
<li>Command + ] / [ gebruiken om het element naar boven of beneden te plaatsen in de z-index tree.</li>
<li>r toets voor een vierhoek</li>
<li>o voor een cirkel</li>
<li>t voor een tekstvlak</li>
<li>Command + g voor groeperen en Command + Shift + g voor degroeperen</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 18-9-2024</h2>
<h3>Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.</h3>
<p>Vandaag hebben we de squad pages van ons groepje samengevormd tot 1 squad page!
Ook hebben we de balans opgemaakt welke issues er nog opgelost moeten worden, en al een groot deel ervan
opgepakt.
</p>
<h3>Schrijf 3 dingen die je geleerd hebt:</h3>
<ol>
<li>Hoe je merge conflicten in GitHub kan oplossen en wat ze inhouden</li>
</ol>
</article>
<section class="blocks-group sprint-divider">
<div class="anchor" id="s2"></div>
<h2>
SPRINT 2
<span>The Client</span>
</h2>
</section>
<article class="blocks-group note-group">
<h2>Checkout Sprint planning (maandag 23-09-24)</h2>
<h3>Wat heb je vandaag gedaan?</h3>
<p>Vandaag hebben we een briefing gekregen van onze opdrachtgever. We hebben gehoord waar het bedrijf voor staat en wat hun doelstelling is.</p>
<h3>Noem drie dingen die je vandaag hebt geleerd.</h3>
<ul>
<li>Wat een Briefing/Debriefing is</li>
<li>Waarom een briefing/debriefing het handig is.</li>
<li>De basics van SCRUM</li>
</ul>
<h3>Formuleer twee leervragen over wat je deze week wil leren.</h3>
<ul>
<li>Ik wil meer duidelijkheid over de gang van het project.</li>
<li>Wat kan ik allemaal met Gradients?</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 25-09-2024</h2>
<h3>Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.</h3>
<ul>
<li>Vandaag hebben we geleerd hoe je een idee kan schetsen. Hoe je wireframes, wireflows en Sitemaps maakt.</li>
<li>Wat het verschil is tussen HiFi en LoFi schetsen.</li>
</ul>
<h3>Schrijf 3 dingen die je geleerd hebt.</h3>
<ol>
<li>Hiërarchie van titels in schetsen (squiggly lines - dikke titels - dunne titels).</li>
<li>Eerst de tekst van de button schrijven, dan de rechthoek eromheen schetsen.</li>
<li>Titels die belangrijk zijn uitschrijven.</li>
<li>Focus state is de state die je ziet als je tabbet</li>
</ol>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 27-09-2024</h2>
<h3>Documenteer wat je vandaag gedaan hebt:</h3>
<p>We hebben mensen beoordeeld:</p>
<!-- Hier misschien nog buttons van maken -->
<div class="buttons">
<a target="_blank" href="https://github.com/cedrikstephen/the-client-website/issues/2" class="button">Cedrik</a>
<a target="_blank" href="https://github.com/Clarice-COD/the-client-website/issues/1" class="button">Clarice</a>
<a target="_blank" href="https://github.com/ambersr/the-client-website/issues/1" class="button">Amber</a>
<a target="_blank" href="https://github.com/FatimaZelay/the-client-website/issues/1" class="button">Fatima</a>
</div>
<h3>Stel jezelf 3 vragen over wat je hebt geleerd over HTML:</h3>
<ul>
<li><strong>Waarom is strong beter dan een bold class op een span?</strong>
<p>Een span met een bold class is niet semantisch genoeg. Beter is om hiervoor een strong te gebruiken.</p>
</li>
<li><strong>Is een div gebruiken niet goed?</strong>
<p>Een div kan je gebruiken, als het nodig is voor de opmaak van het document.</p>
</li>
<li><strong>Ik heb nu even geen verdere vragen</strong></li>
</ul>
<h3>Werk je projectboard bij:</h3>
<p>Verwerk de issues en feedback die je vandaag hebt gekregen:</p>
<ul>
<li>Fix de kleintjes meteen</li>
<li>Plan de grote in voor volgende week.</li>
</ul>
<p>Ik heb de kleine issues opgelost:</p>
<ol>
<li>Language veranderd naar nl in de head. (zie: <a href="https://github.com/DivaniNL/red-pers/issues/2">issue 2</a> en <a href="https://github.com/DivaniNL/red-pers/issues/3">issue 3</a>)</li>
<li>Ook heb ik de <code>span class="bold"</code> instanties veranderd naar <code>strong</code> elements.</li>
</ol>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout Flow Layout 30-09-2024</h2>
<h3>Wat heb je vandaag gedaan?</h3>
<p>Vandaag hebben we uitleg gekregen over 7 verschillende soorten layout modes. Dit zijn: Flow Layout, Flex Layout, Grid Layout, Multi Column Layout, Position Layout, Float Layout en een Table layout.</p>
<h3>Noem drie dingen die je vandaag hebt geleerd over Layout Modes:</h3>
<ol>
<li>Welke elementen standaard inline hebben en welke standaard block.</li>
<li>Wat een multi-column layout is.</li>
<li>Ik heb vandaag naast deze twee dingen verder niks nieuws geleerd.</li>
</ol>
<h3>Schrijf op welke layout modes je nodig hebt voor de leertaak/opdracht van de opdrachtgever:</h3>
<p>Flow, Flex, Grid en Position</p>
</article>
<article class="blocks-group note-group">
<h2>Checkout Typografie en leesbaarheid [02-10-2024]</h2>
<h3>Beschrijf wat je vandaag hebt geleerd.</h3>
<p>Lees tekst heeft een minimale lettergrootte van 16px, optimale regellengte van 10-12 woorden en een regelafstand van 1.4 (line height) leesteksten nooit in caps, nooit centreren(1-3 lijnen wel)</p>
<h3>Schrijf op welke CSS feature over typografie je gaat onderzoeken (Em, Vi, Clamp? Iets anders?)</h3>
<p>Ik vind clamp wel interessant met het gebruik van vw en vh tergelijk</p>
<h3>Schrijf op wat je nu gaat doen voor de opdracht.</h3>
<p>Ik ga het meest gebruikte textformaat in de root vermelden en dan refereren met rem</p>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 7-10-2024</h2>
<h3>Beschrijf de drie code conventies van vandaag in je learning journal</h3>
<ul>
<li>Geef je HTML ademruimte</li>
<li>Schrijf je CSS selectors in dezelfde volgorde als de HTML</li>
<li>Nest je media queries</li>
</ul>
<h3>Schrijf nog twee punten op waarmee je de leesbaarheid van je HTML en CSS kunt verbeteren</h3>
<ol>
<li>Gebruik duidelijke class- en id namen</li>
<li>Gebruik comments bij moeilijke stukken code</li>
</ol>
<h3>Schrijf op welke code conventie je vanaf nu gaat overnemen in je eigen code</h3>
<p>Media queries nesten</p>
</article>
<article class="blocks-group note-group">
<h2>Checkout Wrap up [9-10-24]</h2>
<h3>Schrijf in je Learning Journal kort op wat je vandaag hebt gedaan.</h3>
<p>Vandaag heb ik puntjes op de i gezet met de code + geleerd wat een Sprint review is en hoe je een goede readme maakt.</p>
<h3>Schrijf 3 leervragen over de stof die je vandaag hebt gekregen.</h3>
<ul>
<li>Welke onderdelen zijn relevant in een readme</li>
<li>Hoe bereid je een sprint review voor?</li>
<li>Wat houdt een sprint review in?</li>
</ul>
</article>
<article class="blocks-group note-group">
<h2>Sprint review donderdag 10 Oktober 2024 [Red Pers]</h2>
<p>Vanmiddag waren Adjunct Hoofdredacteur Jitze de Vries en Chef Website Rainn Vink bij on op locatie om de voortgang te bespreken, vragen te beantwoorden en aanpassingen te bespreken</p>
<p>Dit was erg leuk en ik zat op de juiste weg.</p>
<div class="buttons">
<a target="_blank" href="./assets/img/team_Redpers.jpeg" class="button">Een foto na afloop van de meeting met Jitze de Vries (Links)</a>
<a target="_blank" href="https://divaninl.github.io/red-pers" class="button">Bekijk mijn versie van Red Pers</a>
</div>
</article>
<section class="blocks-group sprint-divider">
<div class="anchor" id="s3"></div>
<h2>
SPRINT 3
<span>All Human</span>
</h2>
</section>
<article class="blocks-group note-group">
<div class="anchor" id="s3-analyse"></div>
<h2>Checkout WCAG Audit [14-10-2024] (Analysefase)</h2>
<h3>Schrijf (kort) op wat je vandaag hebt gedaan en geleerd</h3>
<p>Vandaag heb ik de analysefase van sprint 3 voor de artikel-detailpagina van Red Pers afgerond. Tijdens deze fase heb ik ook de sprintplanning uitgevoerd, waarbij ik alle belangrijke momenten en opdrachten aan mijn Project Board heb toegevoegd. Daarnaast heb ik taken aangemaakt om de Lighthouse-test en handmatige tests uit te voeren op mijn website van sprint 2.</p>
<p>Ook hebben we geleerd wat de Web Content Accessibility Guidelines (afgekort WCAG) zijn. Hiermee controleer je of je website goed navigeerbaar/bedienbaar is voor mensen die in een speciale categorie passen. Bijvoorbeeld iemand die slecht hoort. Dit kan permanent zijn, bijvoorbeeld iemand die doof geboren is, maar iemand kan ook tijdelijk doof zijn. Denk bijvoorbeeld aan het barpersoneel in de club.</p>
<h3>Schrijf op wat je nog moet doen voor de WCAG audit presentatie van woensdag.</h3>
<p>Ik ben nog niet begonnen, maar ga er vanmiddag mee aan de slag.</p>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 16-10-2024</h2>
<h3>Schrijf op wat je vandaag hebt gedaan</h3>
<p>Vandaag heb ik mijn WCAG audit deeltaak gepresenteerd. Daarna heb ik hier feedback op gekregen van mijn mentor in Portflow. Daarna hebben we een workshop gekregen over user experience. Hierin hebben we bij verschillende elementen tips gekregen om betere HTML (en ook met behulp van CSS state selectors betere CSS) te schrijven.</p>
<h3>Benoem 3 dingen die je hebt geleerd</h3>
<ul>
<li>Het target attribuut in CSS</li>
<li>::backdrop selector</li>
<li>De fieldset en legend selectors</li>
</ul>
<h3>Beschrijf alle 6 onderdelen uit de workshop en noteer welke je kan toepassen in je opdracht.</h3>
<h4>Links</h4>
<p>Als je de gebruiker ergens op wil laten klikken EN ergens naartoe wilt sturen, dan gebruik je een <a> en geen <button>. Verder kan je met een anchor link (href="#elementID") de pagina laten scrollen. Op dit moment kan je ook met CSS met behulp van (::target) het element targeten in CSS waarnaar gescrolled is. Verder kan je met het download attribuut de user een link laten downloaden. Dit kan een html pagina zijn, maar ook een afbeelding op een server.</p>
<h4>Afbeeldingen</h4>
<p>Het is belangrijk om duidelijke alt attributen toe te voegen aan je website, zodat gebruikers met slecht internet nog wel kunnen zien waar de afbeelding over gaat. Als er tekst in de afbeelding staat, probeer dit zo duidelijk in de alt tekst te vermelden.</p>
<h4>Labels voor invoervelden</h4>
<p>Sommige invoervelden zijn klein en op telefoon moeilijk aanklikbaar, zoals een checkbox of een radio button. Hier is het handig om een label om een invoerveld te plaatsen. Hierdoor kan je ook op de tekst (de label) klikken om het invoerveld te bereiken. Ook is het handig om een focus attribuut toe te voegen aan je invoervelden, zodat het duidelijk is dat een invoerveld geselecteerd is.</p>
<h4>Headings</h4>
<p>Als je een goede headings-nest structuur gebruikt, kunnen screenreaders er een mooie inhoudsopgave van maken. Ook zorgt dit voor nettere HTML.</p>
<h4>Accordeons (FAQ)</h4>
<p>Accordeons zijn een veelgebruikte tool bij het maken van websites. Je ziet op bijna elke FAQ-sectie wel een accordeon staan. Hiermee kan je content beperken op je website, maar ook weer niet, omdat je uitklapbare stukken tekst hebt. Ook kan je hiermee ervoor zorgen dat telkens maar een tabje geopend is.</p>
<h4>Popups</h4>
<p>Popups kan je ook heel makkelijk maken zonder JS te gebruiken:</p>
<pre class="ilw_codeblock"><code>
<!-- --><button popovertarget="popup">Open iets</button>
<!-- --><dialog popover id="popup">
<!-- --> <p>Dit staat in een popup/overlay/popover.</p>
<!-- --> <p>Leuk he.</p>
<!-- --> <button popovertarget="popup" popovertargetaction="hide">Sluit dit ding weer</button>
<!-- --></dialog>
</code></pre>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-test"></div>
<h2>17 Oktober 2024 (Testfase)</h2>
<p><strong>Jarig!🎉 Vandaag mag ik 24 kaarsjes uitblazen!</strong></p>
<p>Goed, door naar de orde van de dag, want er moet natuurlijk nog wel wat gedaan worden. Ik heb de Lighthouse-test gedaan op mijn website uit sprint 2. Dit is onderdeel van de <strong>testfase</strong></p>
<div class="buttons">
<a target="_blank" href="./assets/img/lighthouse_all_human.pdf" class="button">Hier is het resultaat van de Lighthouse test</a>
</div>
<p>Daarna heb ik nog wat handmatige tests gedaan. Als eerste kwam de keyboard test aan bod. Hiervoor ben ik door middel van tabben door de pagina heen gegaan. Wat mij opviel, is dat de buttons "outline: inherit" bevatten. Ik wist niet dat dit de focus state beinvloedde. Ik heb hiervoor <a href="https://github.com/DivaniNL/all-human-accessible-website/issues/12">een issue</a> aangemaakt. Wat hier ook mis gaat zijn de buttons in de popups. Deze worden overgeslagen tijdens het tabben. Tijdens het bekijken van de popup tabt de site ook door de a's en buttons die niet in de popup staan. Ook is de tabvolgorde niet correct.</p>
<p>Als tweede ging ik de handmatige test doen met betrekking tot de screen reader. Hier kwam ik erachter dat sommige afbeeldingen niet voorgelezen werden. Dit komt omdat niet alle afbeeldingen een alt-attribuut hebben. Ook werden sommige buttons niet voorgelezen. Dit zijn de buttons zonder tekst, maar met enkel een icoontje. Deze moeten een aria-label krijgen. Ook hiervoor heb ik issues aangemaakt: </p>
<div class="buttons">
<a target="_blank" href="https://github.com/DivaniNL/all-human-accessible-website/issues/14" class="button">Issue betreft Alt attributen</a>
<a target="_blank" href="https://github.com/DivaniNL/all-human-accessible-website/issues/19" class="button">Issue betreft Aria labels</a>
</div>
<p>Als laatste ging ik een heading en landmarks test doen. Ook hier was ik niet tevreden over. Ik vond dat de taxonomie van de headings niet helemaal klopte met hoe ik het zou indelen. Hier had ik beter over na moeten denken.</p>
<div class="buttons">
<a target="_blank" href="https://github.com/DivaniNL/all-human-accessible-website/issues/20" class="button">Issue betreft betere heading levels</a>
</div>
<p>Vandaag zag ik ook dat Joost Faber een issue had ingeschoten. Hij zag dat ik dubbele content had in mijn code.</p>
<div class="buttons">
<a target="_blank" href="https://github.com/DivaniNL/red-pers/issues/4" class="button">Issue van Joost betreft de dubbele Nav</a>
</div>
</article>
<article class="blocks-group note-group">
<h2>Daily Checkout 18-10-2024</h2>
<h3>Schrijf op wat je vandaag hebt gedaan</h3>
<p>Vandaag hadden we een code/design review van Toegankelijkheid. Ik heb met Ole samen de reviews gedaan van
<a href="https://github.com/julia-stevens/all-human-accessible-website/issues/17">Julia</a> en
<a href="https://github.com/DeBosOs/all-human-accessible-website/issues/1">Luc</a>. Daarnaast heb ik zelf ook een
<a href="https://github.com/DivaniNL/all-human-accessible-website/issues/18">review</a> gekregen.</p>
<h3>Neem de uitbreiding van de checklist code review toegankelijkheid over in je Learning Log en leg kort uit hoe je die getest hebt:</h3>
<ul>
<li><strong>Class namen bevatten een duidelijke beschrijving van de inhoud</strong> – Getest of de klasse namen niet te lang zijn, en overeenkomen met de content, of waar het element voor dient.</li>
<li><strong>Outline by focus op <button> en <a></strong> – Testen door te tabben door de content heen, of deze elementen andere styling krijgen (desnoods standaard styling met de zwarte border).</li>
<li><strong><ul>, <ol>, en <menu> moeten een <li> bevatten</strong> – Website inspecteren en de DOM doorlopen.</li>
<li><strong>Aria-label, aria-expand, etc... voor toegankelijkheid screen readers</strong> – Website inspecteren en de DOM doorlopen.</li>
<li><strong>Genoeg contrast in een tekst met achtergrond duo</strong> – Bijvoorbeeld geen lichtrode tekst op een rode achtergrond. Lighthouse test gedaan op het gebied van toegankelijkheid en gecontroleerd of dit punt terugkwam bij de fouten.</li>
</ul>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-we-love-web"></div>
<h2>18 Oktober 2024 - We ❤️ Web [Dion Pieters]</h2>
<p>Tijdens het We ❤️ Web event gaf Dion Pieters, Creative Developer en docent bij FDND, tips over zijn ervaringen bij het maken van een portfolio<br>Zijn sessie vond plaats van 13:00 - 14:00 in MLH01A30, waar hij onderwerpen besprak zoals de tijdsinvestering, de doelgroep, en wat je wilt tonen.</p>
<p>Dion benadrukte dat je als developer geen designer hoeft te zijn en verwees naar het Sydney Opera House als voorbeeld van groots werk zonder specifieke ervaring.<br>Hij gaf aan erg kritisch te zijn op zijn eigen werk, waarbij hij zijn portfolio zelfs de “slechtste website” die hij ooit heeft gemaakt noemde. Hij sprak ook over een project voor Adam Underwear dat hem tegenviel.</p>
<p>Samen met Sean Hofman voegde hij iets speels toe aan zijn design, zoals een grote smiley. Dion maakt graag gebruik van WebGL om animaties toe te voegen, zodat zijn site niet statisch aanvoelt.</p>
<pre class="ilw_codeblock"><code>"Je eigen portfolio is misschien wel het slechtste product dat je ooit zult maken."</code></pre>
<p>In deze presentatie zag ik dat hij gebruik maakte van transitions met een overshoot (conic-bezier). Ik zal hiermee gaan experimenteren, want dit is wel erg gaaf.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-design"></div>
<h2>19 Oktober 2024</h2>
<p>Vandaag heb ik de designfase achter de rug van deze sprint. Ik heb naar aanleiding van mijn Lighthouse test de contrasten op bepaalde plekken (donkerrode kleur en de tekst/svg fill kleur op de lichtgrijze achtergrond) verhoogd om te voldoen aan de WCAG AA standaarden.</p>
<div class="buttons">
<a target="_blank" href="./assets/img/red_pers_contrast_old.png" class="button">Originele kleur rood</a>
<a target="_blank" href="./assets/img/red_pers_contrast_improved.png" class="button">Aangepaste rode kleur</a>
</div>
<p>Deze kleuren zal ik later vandaag in een "@media (prefers-contrast: more)" query plaatsen, zodat ik in de inspector de kleuren kan omwisselen om het verschil te laten zien.</p>
<p>Hier moet ik nog meer onderzoek naar doen.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-prefers-contrast"></div>
<h2>19 Oktober 2024 - @media prefers-contrast</h2>
<p>Vandaag heb ik mij verdiept in het toepassen van media queries op het gebied van toegankelijkheid. Aangezien ik nog niet definitief de kleurwijziging wil doorvoeren op de website, maar het toch wil presenteren tijdens de Sprint Review, heb ik deze kleurwijzigingen in een speciale media query gezet.</p>
<div class="buttons">
<a target="_blank" class="button" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast">Op deze pagina heb ik er kennis over opgedaan</a>
<a target="_blank" class="button" href="https://github.com/DivaniNL/all-human-accessible-website/commit/a7dd2753c6c16aafc50a283876df650fde08ca12#diff-dccd1fbbd55f72eca67be97e6abdac761f4125e4a22c81214e5be44b63e57c07R67-R73">Hier is te zien waar ik het heb toegepast.</a>
</div>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-a11y"></div>
<h2>21 Oktober - A11y test</h2>
<p>Uit de a11y test zijn de volgende punten niet door de test heen gekomen.</p>
<p><strong>GLOBAL CODE</strong></p>
<ul>
<li>Validate your HTML.</li>
<li>Avoid using the autofocus attribute.</li>
</ul>
<p><strong>KEYBOARD</strong></p>
<ul>
<li>Ensure there is a visible focus style for interactive elements that are navigated to via keyboard input.</li>
<li>Check that keyboard focus order matches the visual layout.</li>
<li>Ensure all interactive elements can be accessed and operated using a keyboard alone.</li>
</ul>
<p><strong>IMAGES</strong></p>
<ul>
<li>Ensure that all <code><img></code> elements have an alt attribute.</li>
<li>Make sure decorative images use a null (empty) alt attribute value.</li>
<li>Verify that important images have meaningful alt text.</li>
</ul>
<p><strong>CONTROLS</strong></p>
<ul>
<li>Ensure that controls have visible :focus states.</li>
<li>Provide a skip link and ensure it is visible when focused.</li>
<li>Identify links that open in a new tab or window.</li>
</ul>
<p><strong>APPEARANCE</strong></p>
<ul>
<li>Check your content in specialized browsing modes (e.g., high contrast, screen readers).</li>
<li>Ensure that fonts and text sizes are readable on all screen sizes.</li>
</ul>
<p><strong>COLOR CONTRAST</strong></p>
<ul>
<li>Check the contrast for all icons and UI elements.</li>
<li>Ensure that text and background contrast meet accessibility guidelines (e.g., WCAG 2.1 AA standards).</li>
<li>Test for color blindness to ensure key information isn't conveyed by color alone.</li>
</ul>
<p>In deze resultaten stonden, behalve HTML validatie (deze heb ik 23-10-2024 opgelost) geen nieuwe punten die niet tijdens de handmatige en lighthouse test aan bod komen.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-build"></div>
<h2>22 Oktober 2024</h2>
<p>Vandaag heb ik de bouwfase achter de rug. Ik heb vandaag alle issues <a href="https://github.com/DivaniNL/all-human-accessible-website/commits/main/">opgelost</a>.</p>
<p>Ik heb alle issues die naar boven zijn gekomen gedurende de analysefase + de punten uit de integratie fase (feedback Red Pers) aangepakt en opgelost.</p>
</article>
<article class="blocks-group note-group">
<h2>Daily checkout 23 Oktober 2024</h2>
<h3>Schrijf 3 dingen op die je vandaag hebt gedaan</h3>
<ol>
<li>Ik heb een Readme gemaakt.</li>
<li>We hebben met ons groepje van Red Pers elkaars werk bekeken.</li>
<li>Ik heb nog wat kleine bugs gefixed in mijn JS voor de all-human site.</li>
<li>Laptop gebruikt zonder muis of trackpad, en keyboard shortcuts opgezocht en geoefend.</li>
</ol>
<h3>Beschrijf 2 verbeteringen die je in je readme hebt gemaakt:</h3>
<ol>
<li>Minder code laten zien.</li>
<li>De nadruk gelegd op de belangrijkere elementen.</li>
</ol>
<h3>Schrijf 1 ding die je anders gaat doen de komende sprint.</h3>
<ol>
<li>Niet te moeilijk over dingen nadenken : )</li>
</ol>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-test2"></div>
<h2>23 Oktober 2024</h2>
<p>Vandaag heb ik de testfase achter de rug.</p>
<p>Op school heb ik voorbereid voor de sprint review van morgen d.m.v. een readme te maken en de laatste puntejs op de i te zetten op het gebied van bugs. Ook heb ik voor de laatste keer mijn gode gevalideerd en daar ook de laatste problemen verholpen.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s3-build"></div>
<h2>Sprint review donderdag 24 Oktober 2024 [Red Pers]</h2>
<p>Ik heb nu de integratiefase ook achter de rug.</p>
<p>Vanmiddag waren Adjunct Hoofdredacteur Jitze de Vries en Chef Website Rainn Vink bij ons op locatie om de voortgang te bespreken, vragen te beantwoorden en aanpassingen te bespreken.</p>
<p>Dit was erg leuk en ik zat op de juiste weg.</p>
<div class="buttons">
<a target="_blank" href="https://divaninl.github.io/all-human-accessible-website" class="button">Bekijk mijn versie van Red Pers [SPRINT 3]</a>
</div>
</article>
<section class="blocks-group sprint-divider">
<div class="anchor" id="s4"></div>
<h2>
SPRINT 4
<span>Look and Feel</span>
</h2>
</section>
<article class="blocks-group note-group">
<div class="anchor" id="s4-sprint-planning"></div>
<h2>Checkout Styleguide (11-11-2024)</h2>
<h3>Documenteer wat je vandaag hebt gedaan en voeg links toe naar voorbeelden en bronnen.</h3>
<p>Allereerst hebben we tijdens de sprint planning de nieuwe taken in het projectboard gemaakt en gekeken wat ons te wachten staat. Hierin hebben we een sitemap en wireframes gemaakt van de pagina's die we gaan ontwerpen en ontwikkelen.</p>
<div class="buttons">
<a target="_blank" href="./assets/img/s4_look_feel_sitemap.JPG" class="button">Sitemap</a>
<a target="_blank" href="./assets/img/s4_look_feel_wire_home.jpg" class="button">Wireframe van de Hoofdpagina</a>
<a target="_blank" href="./assets/img/s4_look_feel_wire_contact.jpg" class="button">Wireframe van de Contactpagina</a>
</div>
<p>Daarna hebben we tijdens de workshop Styleguide verschillende dingen gedaan. Als eerste hebben we gekeken welke uitingen een huisstijl bevatten. Als voorbeeld hebben we Transavia gehad. Deze huisstijl is gemaakt door Studio Dumbar. (<a href="https://studiodumbar.com/work/transavia">Transavia huisstijl door Studio Dumbar</a>) Daarna hebben we gekeken hoe een styleguide eruit ziet van de Decathlon.</p>
<p>Hierna zijn we aan de slag gegaan met de Interface inventory. Hierin hebben we alle instanties van verschillende elementen van de oude site en de site uit sprint 2/3 genoteerd. Daarna zijn we begonnen aan het samenstellen van de Styleguide.</p>
<h3>Schrijf drie dingen op die je geleerd hebt.</h3>
<ol>
<li>Dat een huisstijl niet alleen de website betreft.</li>
<li>Dat het heel verwarrend is als websites veel verschillende styles gebruiken voor dezelfde soorten elementen</li>
<li>Hoe een style guide eruit ziet.</li>
</ol>
<h3>Bedenk ook:</h3>
<h4>Hoe ga je met je team deze teamopdracht aanpakken?</h4>
<p>Allereerste gaan we de volgende drie taken afronden:</p>
<ol>
<li>Interface inventory</li>
<li>Styleguide samenstellen</li>
<li>Gedeelde Stylesheet maken</li>
</ol>
<p>Hierna gaan we elk een design maken van de Home en Contact pagina, en deze ontwikkelen op basis van de gemaakte styleguide.</p>
<h4>Waar ga je afspraken bijhouden? (Teamcanvas?)</h4>
<p>Wij zullen in iedere geval in onze Discord server afspraken noteren. Deze zal gebaseerd zijn op onze team canvas uit sprint 1.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor"></div>
<h2>12 November 2024</h2>
<p>Op 12 november 2024 volgde ik een inspirerende workshop van Wes Oudshoorn, getiteld <em>Playful Figma</em>. Wes is een ervaren designer en ontwikkelaar, 36 jaar oud, die zijn eerste website al in 2002 maakte. In 2012 richtte hij AppSignal op, een tool die ontwikkelaars helpt om versies van hun code te monitoren en bij te houden waar de prestaties achteruitgaan of waar fouten optreden. AppSignal biedt waardevolle inzichten om efficiënter te ontwikkelen en codeproblemen snel te identificeren.</p>
<h3>Figma Tips & Tricks</h3>
<p>Wes gaf ons tijdens de workshop verschillende praktische tips en shortcuts in Figma om sneller en effectiever te werken:</p>
<ul>
<li><strong>Command + Klik:</strong> Hiermee kun je direct het diepste niveau van een element selecteren, zonder eerst door alle lagen te klikken.</li>
<li><strong>I:</strong> Sneltoets voor de kleurpicker, handig om kleuren rechtstreeks uit andere elementen te kopiëren.</li>
<li><strong>Enter:</strong> Een manier om naar een dieper niveau in de lagenstructuur te gaan.</li>
<li><strong>Shift + X:</strong> Wisselt snel de stroke en fill van een element om, wat tijd bespaart bij aanpassingen aan vormen of illustraties.</li>
</ul>
<h3>Werken met Blur Effecten</h3>
<p>Ook behandelde Wes de mogelijkheden om blur-effecten toe te voegen in Figma. Om een blur toe te voegen, ga je naar <em>Effect -> Layer Blur</em>. Dit effect kan subtiele diepte en zachtheid toevoegen aan ontwerpen, waardoor een meer gelaagde uitstraling ontstaat.</p>
<h3>Oefening: Variaties Maken</h3>
<p>Tijdens de workshop kregen we de kans om zelf aan de slag te gaan. We werkten met een voorbeeldontwerp en maakten drie verschillende variaties. Het was een leuke en uitdagende oefening om creatief te zijn en te experimenteren met de tools en technieken die Wes had uitgelegd. Door meerdere versies te maken, leerden we hoe kleine aanpassingen een ontwerp aanzienlijk kunnen veranderen en hoe variaties kunnen helpen om nieuwe ideeën en perspectieven te ontdekken.</p>
<div class="buttons">
<a target="_blank" href="https://www.figma.com/proto/Lv70v1hdSjwOMl9XPZeor6/Playful-Figma?page-id=1401%3A827&node-id=1401-834&node-type=canvas&viewport=388%2C174%2C0.09&t=MJ9goiQowboGAc7i-1&scaling=min-zoom&content-scaling=fixed" class="button">Hier zijn mijn variaties te zien</a>
</div>
<p>De workshop was niet alleen leerzaam maar ook een goede kans om mijn workflow in Figma te verbeteren en efficiënter met de tool om te gaan. Ik kijk ernaar uit om deze technieken vaker toe te passen in mijn eigen ontwerpen!</p>
</article>
<article class="blocks-group note-group">
<h2>Daily checkout 13 november 2024</h2>
<h3>Documenteer wat je vandaag hebt gedaan. Voeg links toe naar voorbeelden en bronnen.</h3>
<p>Eerst hebben we met een groepje van dezelfde opdrachtgever onderzoek gedaan op 3 verschillende websites hoe CSS is toegepast voor een h2 en een button element. De sites die we moesten onderzoeken waren:</p>
<ul>
<li><a href="https://css-tricks.com/">https://css-tricks.com/</a></li>
<li><a href="https://www.smashingmagazine.com/">https://www.smashingmagazine.com/</a></li>
<li><a href="https://fdnd.nl/">https://fdnd.nl/</a></li>
</ul>
<p>Aangezien wij nog niet de stylesheet af hadden en er bij ons wat onduidelijkheid was over de opdracht hadden we het vooral over de stylesheet-opdracht gehad. Het is ons wel gelukt om <a href="https://css-tricks.com/">https://css-tricks.com/</a> te analyseren.</p>
<p>Vandaag hebben we ook uitleg gekregen over custom properties. Met custom properties zorg je ervoor dat je jezelf niet herhaalt (DRY, Don't Repeat Yourself).</p>
<h3>Schrijf drie dingen op die je geleerd hebt</h3>
<ol>
<li>Zet je variables in de body, niet in root</li>
<li>Zet je variable soms binnen een element. Door een andere scope te gebruiken, kan je voor bepaalde elementen en de child elementen ervan, variabelen maken en/of aanpassen. Verdere inspiratie: <a href="https://blog.logrocket.com/css-variables-scoping/">https://blog.logrocket.com/css-variables-scoping/</a> <br><br>
<strong>BIJV:</strong><br>
<pre class="ilw_codeblock"><code>
<!-- -->.button-one {
<!-- --> --color: salmon;
<!-- --> color: var(--color);
<!-- -->}
</code></pre>
</li>
<li>Je kan variabelen ook inline gebruiken (voor nu nog niet relevant, maar dit kan handig zijn als je met data gaat werken). <br><br>
<strong>BIJV:</strong><br>
<pre class="ilw_codeblock">
<code>
<!-- --><button style="--color: red"/>
</code>
</pre>
</li>
</ol>
<h3>Bedenk Ook:</h3>
<h4>Hoe ga je nieuwe CSS code in de gemeenschappelijke en in je eigen code verwerken?</h4>
<p>We hebben vandaag met ons groepje een begin gemaakt aan de stylesheet. Deze maak ik morgen af. Ik ga de nieuwe variabelen op de pagina die ik al heb gemaakt verwerken. Hiernaast zal ik mijn eigen stylesheet maken waarin ik:</p>
<ol>
<li>Deze variabelen gebruik waar nodig</li>
<li>voor de elementen mijn eigen styling toevoegen en in de <HEAD> deze onder de gezamelijke stylesheet inladen.</li>
</ol>
<h4>Waar ga je afspraken over jullie CSS strategie met je teamgenoten documenteren?</h4>
<p>We gaan in ons eigen Team Board afspraken en andere zaken vermelden. Daarnaast gaan we ook een Miro Board maken waar we later op kunnen reflecteren.</p>
</article>
<article class="blocks-group note-group">
<div class="anchor" id="s4-specificity"></div>
<h2>Opdracht betreft Cascade en Specificity [13-11-2024]</h2>
<p>Na de Workshop "stylesheets for styleguides" zijn we zelf aan de slag gegaan met verschillende experimenten betreft Cascade en Specificity.</p>
<p>De uitwerking van de opdracht is hier te zien:</p>
<div class="buttons"><a href="https://divaninl.github.io/look-and-feel-corporate-identity/specificity.html" class="button">Uitwerking</a></div>
<hr>
<h3>Experiment 1: Element Selector</h3>
<p>Ik heb een <code><h2></code> element gemaakt met een class uit de gezamenlijke stylesheet en nog een <code><h2></code> element zonder class:</p>
<pre class="ilw_codeblock"><code>
<!-- --><h2 class="heading-medium">Ik ben een heading, welke kleur krijg ik?</h2>
<!-- --><h2>Ik ben ook een heading, welke kleur krijg ik?</h2>
</code></pre>
<p>In specificity.css heb ik een element selector gemaakt met een andere kleur dan in de huisstijl:</p>
<pre class="ilw_codeblock"><code>
<!-- -->h2 {
<!-- --> color: purple;
<!-- -->}
</code></pre>
<h4>Vragen</h4>
<p><strong>Wordt de heading nu paars? Of wordt de huisstijl uitgevoerd?</strong></p>
<p>De heading wordt inderdaad Paars.</p>
<p><strong>Waarom gebeurt dit?</strong></p>
<p>Dit gebeurt omdat het specificity css-bestand later ingeladen wordt als de file met de huisstijl.</p>
<hr>
<h3>Experiment 2: Class Selector</h3>
<p>Ik heb een extra <code><h2></code> element toegevoegd met twee classes:</p>
<pre class="ilw_codeblock"><code>
<!-- --><h2 class="heading-medium green">Ik ben een heading met twee classes</h2>
</code></pre>
<p>Vervolgens heb ik de green class in specificity.css toegevoegd met een nieuwe kleur:</p>
<pre class="ilw_codeblock"><code>
<!-- -->.green {
<!-- --> color: green;
<!-- -->}
</code></pre>
<h4>Vragen</h4>
<p><strong>Welke kleur krijgt de heading met twee classes? De kleur van de huisstijl of de green class?</strong></p>
<p>Deze wordt zwart. Deze kleur is afkomstig uit de huisstijl.</p>
<p><strong>Waarom krijgt de heading die kleur?</strong></p>
<p>Omdat in <code>redpers.css</code> deze code staat:</p>
<pre class="ilw_codeblock"><code>
<!-- -->.h2.heading_quote {
<!-- --> /*Quote */
<!-- --> color: var(--black);
<!-- --> font-family: var(--font-heading-important);
<!-- --> font-weight: bold;
<!-- --> line-height: var(--line-height-xs);
<!-- --> font-size: var(--font-size-header-xl);
<!-- -->}
</code></pre>
<p>Deze selector heeft een weight van <code>0 0 1 1</code>. Het target de class en het element. De waarde hiervan is 11.<br>
De selector in <code>specificity.css</code> bevat de volgende code:</p>
<pre class="ilw_codeblock"><code>
<!-- -->.green {
<!-- --> color: green;
<!-- -->}
</code></pre>
<p>Deze selector heeft een weight van <code>0 0 1 0</code>. Het target enkel de class. De waarde hiervan is 10.</p>
<p>Aangezien <code>10 > 11</code> wint de selector in de huisstijl.</p>
<hr>
<h3>Experiment 3: Class Volgorde</h3>
<p>In specificity.css heb ik een class gemaakt met dezelfde naam als in de gezamenlijke stylesheet, maar met een andere kleur:</p>
<pre class="ilw_codeblock"><code>
<!-- -->.heading-medium {
<!-- --> color: pink;
<!-- -->}
</code></pre>
<h4>Vragen</h4>
<p><strong>Welke kleur hebben de headings nu?</strong></p>
<p>Zwart</p>
<p><strong>Waarom hebben de headings deze kleur?</strong></p>
<p>Om de zelfde reden als in Experiment 2. In de huisstijl wordt ook het element gebruikt in de selector.</p>
<hr>
<h3>Experiment 4: ID Selector</h3>
<p>Ik heb nog een <code><h2></code> element toegevoegd met de heading-medium class uit de gezamenlijke stijlesheet en een ID:</p>
<pre class="ilw_codeblock"><code>
<!-- --><h2 class="heading-medium test" id="heading">Ik ben een heading met een ID</h2>
</code></pre>
<p>In specificity.css heb ik een ID selector gemaakt met een andere kleur:</p>
<pre class="ilw_codeblock"><code>
<!-- -->#heading {
<!-- --> color: yellow;
<!-- -->}
</code></pre>
<h4>Vragen</h4>
<p><strong>Welke kleur krijgt de heading?</strong></p>
<p>Deze laatste heading wordt geel.</p>
<p><strong>Waarom wint de kleur van de ID-selector of de class?</strong></p>
<p>Omdat een ID selector zwaarder weegt dan een class selector.</p>
</article>
<article class="blocks-group note-group">
<h2>Daily Check Out 15 November 2024</h2>
<h3>Schrijf kort op wat je vandaag hebt gedaan.</h3>
<p>Vandaag hebben we een code-review gedaan op de gezamenlijke styleguide en de Readme van twee groepen.</p>
<p>Hiervoor moesten we controleren met het volgende stappenplan:</p>
<h4>-- README --</h4>
<ol>
<li>Check de Readme of deze genoeg informatie bevat om te begrijpen hoe de stylesheet werkt en hoe deze te implementeren is.</li>
</ol>
<h4>-- CSS --</h4>
<ol>
<li>Check daarna of de stylesheet een logische indeling heeft. Hiermee wordt bedoeld of de secties goed zijn ingedeeld zodat ze makkelijk terug te vinden zijn.</li>
<li>Check daarna of de stylesheet consistente naamgeving bevat (variabelen en classes).</li>
<li>Check daarna of in de stylesheet de naamgeving van variabelen en classes goed te volgen is.</li>
<li>Check daarna of de stylesheet genoeg states bevat (hover, active, focus) en controleer de formulieren (inputvelden, foutmeldingen).</li>
<li>Check daarna of de stylesheet op de juiste plaats/manier custom properties toepast (niet op de :root).</li>
<li>Check daarna of de stylesheet geen herhaling van code bevat.</li>
</ol>
<p>Wij hebben Mediahuis beoordeeld:</p>
<ul>
<li><a href="https://github.com/vsheo/look-and-feel-styleguide/issues/8">https://github.com/vsheo/look-and-feel-styleguide/issues/8</a></li>
<li><a href="https://github.com/vsheo/look-and-feel-styleguide/issues/5">https://github.com/vsheo/look-and-feel-styleguide/issues/5</a></li>
</ul>
<p>Daarna hebben wij DDA beoordeeld:</p>
<ul>
<li><a href="https://github.com/RenzoWille/look-and-feel-styleguide/issues/8">https://github.com/RenzoWille/look-and-feel-styleguide/issues/8</a></li>