progressive-enhancement/faq.html at main · Safae-e/progressive-enhancement · GitHub

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
<!doctype html>
<html lang="nl">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>Veelgestelde vragen / Progressive Enhancement / FDND</title>
		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
		<link href="assets/styles.css" rel="stylesheet">
		<style>
			/* Schrijf hier gewoon je CSS voor dit component */

			.item:nth-of-type(1)[open] summary {
				background-color: rgb(128, 0, 255);
				width: 270px;
				border-radius: 8px 8px 0 0;
				padding: 5px;
			}

			.item:nth-of-type(1)[open] p {
				background-color: rgb(128, 0, 255);
				margin: 0%;
				border-radius: 0 8px 8px 8px;
				padding: 5px;
				margin-bottom: 10px;

			}


			.item:nth-of-type(2)[open] summary {
				background-color: rgb(102, 223, 150);
				width: 270px;
				border-radius: 8px 8px 0 0;
				padding: 5px;
			}

			.item:nth-of-type(2)[open] p {
				background-color: rgb(102, 223, 150);
				margin: 0%;
				border-radius: 0 8px 8px 8px;
				padding: 5px;
				margin-bottom: 10px;
			}


			.item:nth-of-type(3)[open] summary {
				background-color: rgb(239, 235, 105);
				width: 270px;
				border-radius: 8px 8px 0 0;
				padding: 5px;
			}

			.item:nth-of-type(3)[open] .item__content {
				background-color: rgb(239, 235, 105);
				margin: 0%;
				border-radius: 0 8px 8px 8px;
				padding: 5px;
				margin-bottom: 10px;
			}

			details > summary {
				width: 270px;
				border-radius: 8px;
				border: 2px solid currentColor;
				padding: 5px;

			}

			.item__content {
				max-width: 70ch ;

			}


			/* details:open {
				background-color: rgb(128, 0, 255);
			} */

			/* Hint: Dit component kun je volledig met HTML en CSS bouwen */

			/* Hint: Denk aan de states van het component; deze kan open en dicht zijn */
		</style>
	</head>
	<body>
		<h1>Veelgestelde vragen</h1>


		<details class="item">
			<summary>Wat is frontend development?</summary>

			<div class="item__content">
			<p>
				Een frontend developer ontwerpt en bouwt websites in HTML, CSS en JavaScript. Deze frontend talen leer je bij ons, je hebt dus geen voorkennis nodig.
			</p>
			</div>
		</details>

		<details class="item">
			<summary>Moet ik al kunnen coderen?</summary>

			<div class="item__content">
				<p>
					Nee, je hebt helemaal geen voorkennis nodig om te beginnen aan deze opleiding, we kunnen je alles leren! Als je wel al voorkennis hebt, is dat alleen maar goed, dan kunnen we je helpen je skills te verbeteren en te verdiepen in de stof.
				</p>
		    </div>
		</details>

		<details class="item">
			<summary>Wat is een Associate Degree?</summary>

			<div class="item__content">
				<p>
					Een Associate degree-opleiding is een tweejarige hbo-opleiding op niveau 5. Een Ad slaat een brug tussen het mbo-4 (niveau 4) en een hbo-bachelor (niveau 6). Met een Associate degree kies je voor een praktijkgerichte hbo-opleiding; je wordt opgeleid voor een beroep dat aansluit bij de praktijk. In dit geval word je opgeleid tot ‘frontend designer/developer' of kortweg ‘frontender’. Frontenders ontwerpen en maken interactieve, toegankelijke toepassingen voor het web. Frontenders werken binnen het gebied van software development, interactieontwerp en digitaal visueel ontwerp.
					Na afronding van deze tweejarige hbo-opleiding, krijg je een wettelijk erkend hbo-diploma met de graad Associate degree. Met dit Ad-diploma kun je direct aan de slag in het werkveld of doorstromen naar de bacheloropleiding Communication and Multimedia Design (CMD).
				</p>
			</div>
		</details>


		<!-- Hint: Dit stukje HTML geeft het misschien al weg :) -->
		<details >
			<summary>Demo video</summary>
			<video src="assets/faq.mp4" width="765" height="769" controls muted autoplay loop>
				<a href="assets/faq.mp4">assets/faq.mp4</a>
			</video>
		</details>
	</body>
</html>