forked from fdnd/studie-keuze-check
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
174 lines (148 loc) · 7.97 KB
/
Copy pathindex.html
File metadata and controls
174 lines (148 loc) · 7.97 KB
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
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>FDND | Oefenen, 'Ik wil een frontender worden...'</title>
<meta name="description" content="FDND Oefenen">
<!-- <link rel="canonical" href="https://oefenen.fdnd.nl/"> -->
<!-- <meta name="robots" content="index, follow"> -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://styleguide.fdnd.nl/fdnd.css">
<link rel="stylesheet" href="/local.css">
<link rel="icon" type="image/png" href="https://styleguide.fdnd.nl/favicon.png">
<!-- <meta property="og:title" content="FDND Oefenen">
<meta property="og:description" content="De studiekeuzecheck van de Ad Frontend Design & Development">
<meta property="og:site_name" content="skc.fdnd.nl">
<meta property="og:url" content="https://skc.fdnd.nl">
<meta property="og:type" content="website">
<link rel="manifest" href="/manifest.json"> -->
</head>
<body id="top">
<header>
<h1><abbr title="Frontend Design & Development"><span>FDND</span></abbr> <span>'Ik wil een frontender worden...'</span></h1>
</header>
<nav id=menu>
<div>
<h2 class="visually-hidden">Menu</h2>
<ul>
<li><a class="active" href="#over-deze-challenge">Over deze challenge</a></li>
<li><a href="#instructies">Instructies</a></li>
<li><a href="#stap-1">Stap 1</a></li>
<li><a href="#stap-2">Stap 2</a></li>
<li><a href="#cta">Meer weten?</a></li>
</ul>
</div>
<a href="#">Terug naar boven</a>
</nav>
<main>
<section id="over-deze-challenge">
<h2>Code challenge 1</h2>
<p>In deze challenge ga je een aantal basis <em>HTML</em>-elementen vormgeven met <em>CSS</em>-code.</p>
<p>Zo ontdek je of <strong>frontend</strong> iets voor jou is.</p>
<p>Je laat zien <strong>welke skills je al hebt ✨ </strong> én of je <strong>nieuwe skills kunt leren</strong>💪 met behulp van online bronnen.</p>
<p>Veel plezier met de challenge!</p>
</section>
<section id="instructies">
<h2>Instructies</h2>
<h3 id="stap-1">Stap 1: Voorbereiden op de challenge</h3>
<p>Met de online tool <em>Codepen.io</em> kan je in de browser HTML, CSS en JavaScript code schrijven, dit heet een <em>pen</em>. Het resultaat bekijk je direct terwijl je aan het coden bent.</p>
<p>Wij hebben voor deze challenge een pen klaar gezet, die je kan kopiëren naar jouw eigen Codepen omgeving. Dit heet <em>forken</em>. Je kan dan in je eigen omgeving de geforkte pen aanpassen en de challenge uitwerken.</p>
<h4>Codepen.io</h4>
<ol>
<li>Heb je nog geen CodePen-account? Maak er eerst één aan via <a href="https://codepen.io/accounts/signup/user/free" target="_blank">CodePen.io.</a></li>
<li>Fork <!--(hier nog een screenshot toevoegen!!!)--> daarna de <a href="https://codepen.io/FDND/pen/dyvRBWm" target="_blank">challenge</a></li>
</ol>
<h3 id="stap-2">Stap 2: Doe de challenge!</h3>
<p>Maak in jouw fork onderstaand voorbeeld na. Of beter nog, bedenk iets vetters! Gebruik zo nodig onderstaande bronnen als je er niet uitkomt.</p>
<h4>Maak dit voorbeeld na <strong class="emoji">👇</strong></h4>
<figure>
<img src="/assets/codechallenge1-eva.gif" alt="Ik wil een frontender worden...">
<figcaption>Voorbeeld uitwerking</figcaption>
</figure>
<h4>Bronnen</h4>
<ul class="flat">
<li>
<a href="https://medium.com/cssclass-com/css-basics-for-typography-160025e3aeca" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-css3" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z" />
<path d="M8.5 8h7l-4.5 4h4l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5" />
</svg>
CSS Basics for Typography
</a>
</li>
<li>
<a href="http://blog.colorcode.is/color-theory-fundamentals-for-web-design/" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-css3" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z" />
<path d="M8.5 8h7l-4.5 4h4l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5" />
</svg>
Color Theory Fundamentals for Web Design
</a>
</li>
<li>
<a href="https://css-tricks.com/video-screencasts/97-intro-to-css-animations/" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-css3" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z" />
<path d="M8.5 8h7l-4.5 4h4l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5" />
</svg>
Intro to CSS Animations
</a>
</li>
</ul>
</section>
<section id="cta">
<h2 class="large-heading">
Frontender worden?
</h2>
<p class="xlarge-body font-medium">
FDND is de enige hbo-opleiding in Nederland voor frontend, waar je in twee jaar websites leert ontwerpen én bouwen!
</p>
<p class="medium-body">
En dat is niet alles: studenten beoordelen FDND al drie jaar op rij als <a href="https://www.studiekeuze123.nl/opleidingen/20503-frontend-design-development-hogeschool-van-amsterdam-hbo-associate-degree" target="_blank">topopleiding </a> in de <a href="https://lcsk.nl/nieuws/74-procent-hbo-en-wo-studenten-tevreden-over-hun-opleiding/" target="_blank">Nationale Studenten Enquête</a>,
onder andere vanwege de inhoud en de sfeer.
</p>
<p class="medium-body font-bold">
<h4>Enthousiast geworden?</h4>
</p>
<div class="button-row">
<a class="button is-accent-3 is-full-color" href="https://studiekiezen.hva.nl/form/FrontendDesignDevelopment_vt_meelopen_student?lang=nl-nl">
<span>
Loop een ochtend met ons mee
</span>
</a>
</div>
<p class="medium-body">
Voor informatie over de opleiding of andere vragen kun je contact opnemen met het onderwijsbureau:
</p>
<p class="medium-body">
<span class="font-medium">Telefoonnummer:</span> <a href="call:+31205951855">020 595
1855</a>
<br>
<span class="font-medium">E-mail:</span> <a href="mailto:info-fdnd@hva.nl">info-fdnd@hva.nl</a>
</p>
</section>
</main>
<footer>
<nav>
<h2>FDND microsites</h2>
<p>
FDND maakt gebruik van microsites.
Microsites zijn kleine websites ter ondersteuning van een campagne, informatie over een product, dienst of voor een ander specifiek doel.
</p>
<ul>
<li><a href="https://fdnd.nl">FDND.nl</a></li>
<li><a href="https://contact.fdnd.nl">Contact en routebeschrijving</a></li>
<li><a href="https://programma.fdnd.nl">Programma</a></li>
<li><a href="https://skc.fdnd.nl">Studie Keuze Check</a></li>
<li><a href="https://partners.fdnd.nl">Partners</a></li>
<li><a href="https://tasks.fdnd.nl">Leertaken</a></li>
<li><a href="https://styleguide.fdnd.nl">Styleguide</a></li>
</ul>
</nav>
</footer>
</body>
</html>