forked from akaLaws/oneday-workshop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
546 lines (471 loc) · 28 KB
/
index.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
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webudvikler workshop</title>
<link rel="stylesheet" href="css/style.css" >
<script src="https://kit.fontawesome.com/215b90b29c.js" crossorigin="anonymous" defer></script>
<script src="script.js" defer></script>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js" defer></script>
</head>
<body>
<header>
<nav>
<label for="togglemenu">...</label>
<input type="checkbox" id="togglemenu">
<ul class="topmenu">
<a href="#info">
<li>Praktisk info</li>
</a>
<a href="#opgaver">
<li>Lær at kode</li>
</a>
<a href="https://github.com/akaLaws/brobyg-profile-card/blob/master/linksRessources.md" target="_blank">
<li>Nyttige links</li>
</a>
<a href="https://www.rts.dk/eud-erhvervsuddannelser/erhvervsuddannelser-eud/146-webudvikler">
<li>Bliv webudvikler!</li>
</a>
</ul>
</nav>
</header>
<main>
<article name="hvad" class="landing">
<section>
<h1>webudvikler</h1>
</section>
<section aria-label="udannelsen">
<a href="https://www.rts.dk/eud-erhvervsuddannelser/erhvervsuddannelser-eud/146-webudvikler" target="_blank">
<h2> Webudvikler uddannelsen</h2>
</a>
<dl>
<dt>Varighed</dt>
<dd>grundforløb + 1 år & 3 md.</dd>
<dt>Økonomi </dt>
<dd>
<a href="https://www.su.dk/su/om-su-til-ungdomsuddannelser-gymnasium-hhx-mv/" target="_blank">
SU
</a>
</dd>
<dt>Format</dt>
<dd>Projekt orienteret</dd>
<dt>Praktik</dt>
<dd>2 x 6 uger på Hovedforløbet</dd>
<dt>Opstart (Grundforløb 1)</dt>
<dd>August</dd>
<dt>Opstart (Grundforløb 2)</dt>
<dd>August & Januar</dd>
</dl>
<figure class="process">
<span></span>
<span></span>
<ul>
<li>Grundforløb 1</li>
<li>Grundforløb 2</li>
<li>Hovedforløbet</li>
</ul>
</figure>
</section>
<section class="action" aria-label="ansøg">
<p>
På webudvikler-uddannelsen lærer du at arbejde med programmering og udvikling af webløsninger til forskellige platforme som websites og mobile enheder.
Uddannelsen giver i teori og praksis en solid viden om arbejdet med front-end og webløsninger.
</p>
<a href="https://www.rts.dk/eud-erhvervsuddannelser/erhvervsuddannelser-eud/146-webudvikler" target="_blank">
Biv webudvikler
</a>
</section>
</article>
<article class="invert" name="utility" id="info">
<section class="utility" aria-label="skema">
<h2>Plan for dagen</h2>
<ul class="schedule">
<li>08.10 - 09.40</li>
<li>Introduktion & Opgave</li>
<li>09.40 - 10.00</li>
<li>PAUSE</li>
<li>10.00 - 11.30</li>
<li>Opgave</li>
<li>11.30 - 12.00</li>
<li>PAUSE</li>
<li>12.00 - 13.30</li>
<li>Opgave & Afslutning</li>
</ul>
<ul class="facility">
<li>Toiletter findes i hver ende på hoved gangen på hver etage.</li>
<li>Køkken med microbølgeovn og vask findes også på hovedgang på hver etage.</li>
</ul>
</section>
<section aria-label="lokation">
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2252.656693589048!2d12.081190283050539!3d55.625389102514475!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46525febe81aa287%3A0x9864d6527aec94c3!2sPulsen%208%2C%204000%20Roskilde!5e0!3m2!1sda!2sdk!4v1666528380879!5m2!1sda!2sdk"
width="100%"
height="350"
style="border: 2"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
>
</iframe>
</section>
</article>
<article name="Hvordan">
<section class="frontend">
<h2>Hvad er Frontend Webudvikling??</h2>
<section>
<h3>HTML</h3>
<p>
HTML står for HyperText Markup Language. Det er et standard markup sprog for kodning af websites.
Det gør det muligt at skabe og strukturere sektioner, paragrafer, og links ved brug af HTML elementer
(Websites byggeklodser) som består af tags og atrributter.
</p>
</section>
<section>
<h3>CSS</h3>
<p>
CSS er et sprog der specificeres hvorda dokumenterne præsenteres for brugeren — Hvordan brugerflader er designet iht stilen og layout mm. CSS består af en selector, prorperty og value.
</p>
</section>
<section>
<h3>JavaScript</h3>
<p>JavaScript er et scripting eller programmings sprog som tillader implementeriongen af komplex funktionalitit til websites.</p>
</section>
</section>
<section class="code" aria-label="kodesprogene">
<p
class="codepen"
data-height="400"
data-theme-id="light"
data-default-tab="html,result"
data-slug-hash="dyexXMr"
data-editable="true"
data-user="akalaws"
style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
>
<span>
See the Pen
<a href="https://codepen.io/akalaws/pen/dyexXMr">
what is frontend
</a>
by Sarah-Elizabeth Laws (<a href="https://codepen.io/akalaws">@akalaws</a>)
on <a href="https://codepen.io">CodePen</a>.
</span>
</p>
</section>
<section class="assignment frontend" aria-label="opgaven" id="opgaver">
<h2>Opgave beskrivelse</h2>
<div>
<p>
Du skal lave et digitalt visitkort som du kan sende ud til folk og som linker videre til dine sociale media. Du skal dog ikke gøre dette uden hjælp.
Så følg instruktionerne nedenfor - og bliv ikke bekymret over at det ser lidt kedeligt ud til starten. Når opgaverne er færdig får du links og værktøjer
til hvordan du kan customize og tilføje endnu mere lir og gøre visitkortet til dit eget.
</p>
<p>
Det kan dog hjælpe at have en ide om hvordan det færdige design bør se ud - ish. Så vil du se hvad det er du nogenlunde skal ramme kan du trykke på knappen nedenfor.
</p>
<button name="pop" onclick="showImg()">
Se eksempel på resultatet
</button>
<div class="hoverimg" style="display:none">
<img src="images/sample.PNG" loading="lazy">
<button name="close" onclick="closeImg()"> Luk billedet</button>
</div>
</div>
<section aria-label="opgave 1">
<h3>#1 opret en bruger & pen på CodePen</h3>
<p>
Codepen er et fantastisk miljø til at starte ud med at kode - det er "snippet" paradis.
Her har du 3 filer som allerede er integreret og linket til hinanden.
Du skal bare begynde at kode og se resultatet med det samme.
</p>
<p>
Desuden findes der en community med masser af offentlige projekter til inspiration.
</p>
<ol>
<li>
Gå ind på <a href="https://codepen.io/" target="_blank">Code Pen</a> og opret en bruger. Husk at vælg et brugernavn du kan sende til en arbejdsgiver.
</li>
<li>
<a href="https://codepen.io/pen/" target="_blank">Lav en ny pen</a> - enten i menuen til højre eller ved at trykke på profil billedet.
</li>
<li>
Navngiv din pen med [dit navn - visitkort] for eksempel : "Gurli Gris - visitkort"
</li>
<li>
Gå videre til opgave #2
</li>
</ol>
</section>
<section aria-label="opgave 2">
<h3>#2 Kod HTML til dit visitkort</h3>
<p>
Dette er strukturen / skelettet på din webapp.
Det er her vi fortæller siden hvilke kasser der skal være og hvilket indhold der skal i dem.
</p>
<p>
I dette tilfælde vil vi gerne have et billede, et navn, en titel, en kort introduktion og ellers links til diverse sociale media.
</p>
<p>
Dette bygges op som man kender det fra aviserne i artikler med sektioner og med headings (overskrifter) og paragraffer.
</p>
<ol>
<li>
I HTML boxen skriver du et <span><article></article></span> tag. Husk at bruge "enter" så der er en ny linje mellem dem.
</li>
<li>
Inde i din article mellem start og slut tagget på den tomme linje skriver du <span><section class="info"></section></span>. Husk ny linje immellem dem.
</li>
<li>
Inde i din section skriver du <span><h1>[dit navn]</h1></span>.
</li>
<li>
Nedenunder din h1 (stadig inde i din section) skriver du <span><h2>[din titel]</h2></span>.
</li>
<li>
Nedenunder din h2 (stadig inde i din section) skriver du <span><p>[din introduktion]</p></span>.
</li>
<li>
Under din section laver du nu en NY section ved at skrive <span><section class="icons"></section></span>. Husk ny linje immellem tagsne.
</li>
<li>
Gå til opgave #3
</li>
</ol>
</section>
<section aria-label="opgave 3">
<h3>#3 Find og tilføj et profil billede</h3>
<p>
Vi vil gerne have et billede til visitkortet og helst et af dig selv.
Hvis du nægter at have et billede af dig selv kan du evt finde et tilfædligt kattebillede.
Vær dog opmærksom på at det ikke skal være FOR stort et billede.
</p>
<ol>
<li>
Gå ind på dit foretrukne sociale medie og find dit profil billede.
</li>
<li>
Højreklik på billedet og vælg "åben i ny fane".
</li>
<li>
I den nye fane der åbnes kan du nu se dit billede. Markér og kopiér URL'en til billedet fra adressebaren.
</li>
<li>
Gå tilbage i din Pen og i HTML boksen - i den første section lige over h1 - skriver du <span><img src="" /></span>.
</li>
<li>
Mellem de to "" efter src indsætter du den URL du kopierede i nr. 3 - resultatet værende <span><img src="[din billed url]" /></span>.
</li>
<li>
Gå til opgave #4
</li>
</ol>
</section>
<section aria-label="opgave 4">
<h3>#4 Find og tilføj Social medie ikoner</h3>
<p>
på <a href="https://fontawesome.com/search?o=r&m=free"> Fontawesome</a> kan vi finde en masse gratis ikoner
som kan tilføjes til vores projekter gennem en ekstern fil med CSS og Javascript.
</p>
<ol>
<li>
inde i <span><section class="icons"></section></span> skal du lave en ny linje og tilføje følgende kode <b style="color:rgb(220, 106, 65); font-weight: 400;"><script src="https://kit.fontawesome.com/215b90b29c.js" crossorigin="anonymous"></script></b>
</li>
<li>
Så tilføjer du et anchor tag inde under <span><section class="icons"></section></span>, anchor er et link til en fil (evt. en ekstern webside).
Du skriver følgende <span><a href=""></a></span>.
</li>
<li>
inde i <span>href""</span> indsætter du det kopierede link til den respektive social media konto.
</li>
<li>
Herefter skal du gå ind på <a href="https://fontawesome.com/search?o=r&m=free"> Fontawesome</a> og søge på de ikoner du skal bruge, f.eks. "instagram".
</li>
<li>
Når du trykker på ikonet kommer en kode frem i et <span><i class=""></i></span> tag. Denne skal du kopiere og sætte det in under dit <span><a href=""></a></span>.
</li>
<li>Gå til opgve #5</li>
</ol>
</section>
<section aria-label="opgave 5">
<h3>#5 Kod CSS til dit visitkort</h3>
<p>
CSS er vores stil - vores swag, sparkles og personlighed.
Det er her vi fortæller hvordan vores kasser og deres indhold skal se ud og hvor de skal placeres i forhold til hinanden.
</p>
<p>
I CSS bruger vi selectors til at vælge de tags / kasser som vi vil style.
I CSS boksen starter vi med at selecte / vælge vore article vi bruger {} til at definere hvilke properties / egenskaber vores valgte element skal have.
Samt values / værdierne for de givne properties.
</p>
<ol>
<li>
Start da med at skrive <span>article{ }</span> sørg for der er en ny linje mellem {}. Inde i {} for article på den nye linje vælger du følgende prorperties og values. Sørg for at der er en ny linje mellem dem.
Husk at : indikerer at du starter med at beskrive en value og ; at du har afsluttet en value og derved også en property.
<ul>
<li><span>display: flex;</span></li>
<li><span>flex-direction: column;</span></li>
<li><span>gap: 2rem;</span></li>
<li><span>width:60%;</span></li>
<li><span>margin: auto;</span></li>
<li><span>padding: 3rem;</span></li>
<li><span>border: 0.2rem solid black;</span></li>
<li><span>border-radius: 0.5rem;</span></li>
<li><span>box-shadow: 5px 5px 10px grey;</span></li>
<li><span>text-align: center;</span></li>
</ul>
</li>
<li>
Herefter skal vi have fat i vores første section -
den har vi dog givet en class vi kaldte "info" for at selecte den specifikke class skal vi i vores CSS NEDENUNDER article EFTER },
skrive <span>.info{}</span>. Bemærk at vi har lavet en custom class - vi kunne kalde den hvad som helst faktisk.
Vi skal bare huske at lave et punktum før navnet når vi selecter den i CSS.
</li>
<li>
Inde i {} for .info på en nye linje vælger du følgende prorperties og values. Sørg for at der er en ny linje mellem dem.
<ul>
<li><span>display: flex;</span></li>
<li><span>flex-direction: column;</span></li>
<li><span>justify-content: center;</span></li>
<li><span>align-items: center;</span></li>
<li><span>gap: 2rem;</span></li>
</ul>
</li>
<li>
Nu vil vi have fat i vores billede og gøre det rundt. Vi selecter da <span>img{ }</span> som vi skriver EFTER .info EFTER slut } for denne.
Inde i din img skriver du følgende
<ul>
<li><span>width: clamp(4rem, 45vh, 10rem);</span></li>
<li><span>height: clamp(4rem, 45vh, 10rem);</span></li>
<li><span>border-radius: 100%;</span></li>
<li><span>object-fit: cover;</span></li>
<li><span>border: 1rem solid black;</span></li>
</ul>
</li>
<li>
Nu til vores navn efter din img selecter vi nu <span>h1{ }</span>. Inde i denne tilføjer du følgende properties
<ul>
<li><span>font-size: clamp(1.5rem, 4vw, 5rem);</span></li>
<li><span>font-weight: 600;</span></li>
<li><span>color: cadetblue;</span></li>
</ul>
</li>
<li>
Nu til vores titel efter din h1 selecter vi nu <span>h2{ }</span>. Inde i denne tilføjer du følgende properties
<ul>
<li><span>font-size: clamp(1rem, 2vw, 3rem);</span></li>
<li><span>font-weight: 200;</span></li>
<li><span>color: darkgrey;</span></li>
</ul>
</li>
<li>
Tid til at style din introduktion i p tagget. Efter din h2 selecter vi nu <span>p{ }</span>. Inde i denne tilføjer du følgende properties
<ul>
<li><span>font-size: clamp(1rem, 1.5vw, 1.3rem);</span></li>
<li><span>color: black;</span></li>
</ul>
</li>
<li>
Nu Mangler vi kun vores links til de sociale media. Her skal du have fat i den class du skrev der hed ikoner.
Efter p og efter } skriver du da <span>.icons{ }</span>. Inde i .icons classen skriver du følgende properties
<ul>
<li><span>display: flex;</span></li>
<li><span>flex-direction: row;</span></li>
<li><span>justify-content: center;</span></li>
<li><span>align-items: center;</span></li>
<li><span>gap: 2rem;</span></li>
</ul>
</li>
<li>
vi skal have stylet vores anchors dvs de links vi har sat ind i HTML'en. Vi selecter da <span>a{ }</span> og inde i den skriver du
<ul>
<li><span>text-decoration: none;</span></li>
<li><span>color: cadetblue;</span></li>
<li><span>font-size: clamp(1rem, 2vw, 3rem);</span></li>
</ul>
</li>
<li>
vi vil gerne have linket til at ændre farve når vi hover over den. Vi selecter da <span>a:hover{ }</span> og inde i den skriver du
<ul>
<li><span>color: grey;</span></li>
</ul>
</li>
<li>
Nu kan du customize dit visitkort med baggrunde farver og text typer.
Gå evt. ind på <a href="https://cssreference.io/" target="_blank">CSS reference websitet</a> under box-model eller typografi og lad dig inspirerer
</li>
</ol>
</section>
</section>
<section class="frontend" aria-label="lær mere">
<h2>Vil du lærer mere??</h2>
<section>
<h3>Bedazzle dit visitkort endnu mere</h3>
<p>
Bliv inspireret af <a href="https://akalaws.github.io/brobyg-profile-card/" target="_blank">dette visitkort</a> med custom skrifttyper, gradient baggrund og ikke mindst animationer.
</p>
<p>
Vil du vide hvordan og desuden også få adgang til en liste over links til de <a href="https://github.com/akaLaws/brobyg-profile-card/blob/master/linksTools.md" target="_blank">eksterne værktøjer</a> vi bruger på Webudvikler uddannelsen,
nyttinge links til hvor du kan <a href="https://github.com/akaLaws/brobyg-profile-card/blob/master/linksRessources.md" target="_blank">lære endnu mere</a>
og ikke minds lidt om <a href="https://github.com/akaLaws/brobyg-profile-card/blob/master/linksProcesses.md" target="_blank">arbejdsmetoderne</a>
(og hvordan <a href="https://github.com/akaLaws/brobyg-profile-card/blob/master/linksProcesses.md#en-neurodivergent-guide-til-kodning" target="_blank">orblindhed kan være en superpower</a> som udvikler),
Så klik løs på linksne eller å ind på dette ene link til det <a href="https://github.com/akaLaws/brobyg-profile-card" target="_blank">samlede repository på github for visitkort+ projektet</a>.
</p>
</section>
<section>
<h3>Følg et online kursus i HTML og CSS</h3>
<p>
Free Code Camp tilbyer et <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">gratis kursus i responsive web</a> der rent lavpraktisk introducere dig for HTML og CSS gennem øvelser du selv skal kode.
Samt selvfølgelig med instruktioner og teori.
</p>
</section>
<section>
<h3>Oplev den fulde effekt af CSS</h3>
<p>
På <a href="http://www.csszengarden.com/">CSS zen garden</a> kan du opleve HVOR meget CSS betyder for oplevelsen af et website.
Her er ikke blot eksempelr på hvordan andre har fortolket websitet ved KUN at ændre CSS'en, DU kan også prøve. Download koden og ændre på CSS'en.
Se hvor din kreativitet fører dig hen.
</p>
</section>
<section>
<h3>Tilføj animationer til dit visitkort</h3>
<p>
Men <a href="https://animate.style/">CSS Animate</a> bilblioteket (ekstent stylesheet) kan du tilføje animationer til dine HTML tags gennem class="" attributten.
Blot følg guiden på forsiden for at komme i gang.
</p>
</section>
<section>
<h3>Tilføj custom skrifttyper til dit projekt</h3>
<p>
<a href="https://fonts.google.com/">Google fonts</a> lader dig tilføje alverdens custom fonts til din app eller dit website.
Foruden ikoner og en masse guides, artikler og andre resourcer for at lave et lækkert design.
</p>
</section>
<section>
<h3>Se hvad de laver på Grundforløb 1</h3>
<p>
Vil du vide mere om hvad Grundforløb 1 byder på i forhold til webudvikling?
</p>
<p>
Følg @codingLaws på <a href="https://www.youtube.com/channel/UCHMUH_AYj_AnRxh27PKQdOQ">Youtube</a> og blive opdateret på bl.a. video tutorials som udvikles til vore Elever og alle andre interesserede i webudvikling.
<a href="https://www.youtube.com/playlist?list=PLHf0m3JrpGdqaVjoTvprvm1E-HXYmqfVW">VISITKORT I HTML OG CSS </a> playlisten er lavet specifikt for Grundforløb 1
- har du mod på at prøve, eller vil du bare have et indblik til hvad i kan forvente, så tag et kig.
</p>
</section>
</section>
</article>
</main>
<footer class="some">
<a href="https://www.instagram.com/roskildetekniskeskole">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://www.youtube.com/channel/UCQ_DCxJMCI7z-lY-_1VRS1g">
<i class="fa-brands fa-square-youtube"></i>
</a>
<a href="https://www.facebook.com/roskildetekniskeskole">
<i class="fa-brands fa-square-facebook"></i>
</a>
</footer>
</body>
</html>