-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
531 lines (492 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<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>FDND Web Design Quotes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>
<span>fdnd</span>
<span>frontend</span>
<span>design</span>
<span>and</span>
<span>development</span>
</h1>
<h2>In need of a Web Design quote?</h2>
<p>
These quotes are used in the design and development courses
of the two year programme <a href="https://fdnd.nl">Frontend Design & Development</a>,
at the <a href="https://hva.nl">Amsterdam University of Applied Science</a>.
</p>
<div class=downarrow>
↓
</div>
</header>
<nav>
<h3>Find your quote</h3>
<p>
Toon alle quotes in een compacte lijst.
Sorteer de lijst op nieuw-oud of a-z.
Geef een random quote.
Filter de quotes op onderwerp. Of tags?
Lange quotes, of kort maar krachtig.
Of een quote carousel player.
</p>
</nav>
<figure
class=""
id="egor-kloos"
data-presentation="we<3web, look&feel"
data-labels="">
<blockquote cite="#">
<p>
De kinderen bepalen niet hoe ze gedragen worden, dat moeten de ouders doen.
</p>
</blockquote>
<figcaption>
Egor Kloos
</figcaption>
</figure>
<figure
class=""
id="tim-berners-lee-2"
data-presentation="sprint 3, accessibility"
data-labels="">
<blockquote cite="#">
<p>
This is for everyone.
</p>
</blockquote>
<figcaption>
Tim Berners-Lee
</figcaption>
</figure>
<figure
class="long"
id="tim-berners-lee"
data-presentation="sprint 3, accessibility"
data-labels="">
<blockquote cite="#">
<p>
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
</p>
</blockquote>
<figcaption>
Tim Berners-Lee
</figcaption>
</figure>
<figure
class=""
id="dan-roam"
data-presentation="sprint 2, design, sketchnotes"
data-labels="">
<blockquote cite="#">
<p>
Pictures are a very very powerful way to help us clarify the complexity of ideas.
</p>
</blockquote>
<figcaption>
Dan Roam
</figcaption>
</figure>
<figure
class="long"
id="robert-c-martin"
data-presentation="sprint 2"
data-labels="development, code">
<blockquote cite="#">
<p>
You know you are working on clean code when [everything] turns out to be pretty much what you expected.
</p>
</blockquote>
<figcaption>
Robert C. Martin
</figcaption>
</figure>
<figure
class="long"
id="paula-scher"
data-presentation="sprint 2, Visuale identiteit en huisstijl"
data-labels="design">
<blockquote cite="#">
<p>
Identities are the beginning of everything. They are how something is recognized and understood. What could be better then that?
</p>
</blockquote>
<figcaption>
Paula Scher
</figcaption>
</figure>
<figure
class="long"
id="stone-librande"
data-presentation="sprint 2, wireframes"
data-labels="wireframes, UI">
<blockquote cite="#">
<p>
When I was working at Blizzard I was making UI flow diagrams and I noticed that a few engineers were hanging the documents on their walls for reference.
</p>
</blockquote>
<figcaption>
Stone Librande
</figcaption>
</figure>
<figure
class=""
id="benjamin-franklin"
data-presentation="sprint 2, Debriefing, project management"
data-labels="">
<blockquote cite="#">
<p>
By failing to prepare, you are preparing to fail.
</p>
</blockquote>
<figcaption>
Benjamin Franklin
</figcaption>
</figure>
<figure
class="long"
id="charles-darwin"
data-presentation="sprint 2, Agile"
data-labels="agile, life, ">
<blockquote cite="#">
<p>
It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.
</p>
</blockquote>
<figcaption>
Charles Darwin
</figcaption>
</figure>
<figure
class=""
id="terry-eagleton"
data-presentation="sprint 1, Retrospect"
data-labels="life">
<blockquote cite="#">
<p>
Understanding is always in some sense retrospective.
</p>
</blockquote>
<figcaption>
Terry Eagleton
</figcaption>
</figure>
<figure
class=""
id="marjorie-north"
data-presentation="Sprint 1, Presenteren"
data-labels="presentation">
<blockquote cite="#">
<p>
Know Your Audience. Your Speech Is About Them, Not You.
</p>
</blockquote>
<figcaption>
Marjorie North
</figcaption>
</figure>
<figure
class="long"
id="martin-fowler"
data-presentation="Sprint 1,HTML Semantiek"
data-labels="html development">
<blockquote cite="#">
<p>
Poorly designed code usually takes more code to do the same things, often because the code quite literally does the same thing in several places.
</p>
</blockquote>
<figcaption>
Martin Fowler
</figcaption>
</figure>
<figure
class=""
id=epictetus
data-presentation="Sprint 1,Trucjes met CSS 2"
data-labels="life">
<blockquote cite="#">
<p>
Practice yourself, for heaven’s sake in little things, and then proceed to greater.
</p>
</blockquote>
<figcaption>
Epictetus
</figcaption>
</figure>
<figure
class="long"
id=heydon-pickering
data-presentation="Sprint 1,Trucjes met CSS 2"
data-labels="development css">
<blockquote cite="https://heydonworks.com">
<p>
Even the most complex systems must depend on foundational rules, and CSS is no different.
</p>
</blockquote>
<figcaption>
Heydon Pickering
</figcaption>
</figure>
<figure
class=""
id=stephen-hay
data-presentation="Sprint 1,Responsive Design"
data-labels="breakpoint design layout media-query">
<blockquote cite="https://alistapart.com/article/designing-for-breakpoints/">
<p>
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
</p>
</blockquote>
<figcaption>
Stephen Hay
</figcaption>
</figure>
<figure
class="long"
id=john-allsopp
data-presentation="Sprint 1,Responsive Design"
data-labels="design accessibility">
<blockquote cite="https://alistapart.com/article/dao/">
<p>
It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.
</p>
</blockquote>
<figcaption>
John Allsopp
</figcaption>
</figure>
<figure
class=""
id=massimo-vignelli
data-presentation="Sprint 1,Layout Grid en Flexbox"
data-labels="humor design grid layout">
<blockquote cite="http://www.vignelli.com">
<p>
A grid is like underwear, you wear it but it's not to be exposed.
</p>
</blockquote>
<figcaption>
Massimo Vignelli
</figcaption>
</figure>
<figure
class=""
id=linus-pauling
data-presentation="Sprint 1,Ideegeneratie"
data-labels="design process">
<blockquote cite="#">
<p>
The best way to have good ideas is to have many ideas.
</p>
</blockquote>
<figcaption>
Linus Pauling
</figcaption>
</figure>
<figure
class=""
id=steve-jobs
data-presentation="Sprint 1,Het Team Canvas"
data-labels="design development teamwork">
<blockquote cite="#">
<p>
Great things in business are never done by one person; they’re done by a team of people.
</p>
</blockquote>
<figcaption>
Steve Jobs
</figcaption>
</figure>
<figure
class=""
id=janna-cachola
data-presentation="Sprint 1,Wrap-up"
data-labels="life">
<blockquote cite="#">
<p>
You can't achieve excellence in life if you fear opinion.
</p>
</blockquote>
<figcaption>
Janna Cachola
</figcaption>
</figure>
<figure
class=""
id=wallace-stegner
data-presentation="Sprint 1,Wrap-up"
data-labels="documentation">
<blockquote cite="#">
<p>
We write to make sense of it all.
</p>
</blockquote>
<figcaption>
Wallace Stegner
</figcaption>
</figure>
<figure
class=""
id=aniekee-tochukwu-ezekiel
data-presentation="Sprint 1,Wrap-up"
data-labels="">
<blockquote cite="#">
<p>
Cleanliness makes it easier to see the details.
</p>
</blockquote>
<figcaption>
Aniekee Tochukwu Ezekiel
</figcaption>
</figure>
<figure
class="long"
id=josef-muller-brockmann
data-presentation="Sprint 1,Visual Interface Design"
data-labels="typograpy design">
<blockquote cite="https://en.wikipedia.org/wiki/Josef_Müller-Brockmann">
<p>
A column is easy to read if it's wide enough to accommodate an average of 10 words per line.
</p>
</blockquote>
<figcaption>
Josef Müller-Brockmann
</figcaption>
</figure>
<figure
class="long"
id=joshua-porter
data-presentation="Sprint 1,Visual Interface Design"
data-labels="design">
<blockquote cite="http://bokardo.com/principles-of-user-interface-design/">
<p>
A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.
</p>
</blockquote>
<figcaption>
Joshua Porter
</figcaption>
</figure>
<figure
class=""
id=deyth-banger
data-presentation="Sprint 1,Trucjes met CSS 1"
data-labels="development life">
<blockquote cite="#">
<p>
There are few glitches and bugs in the Matrix.
</p>
</blockquote>
<figcaption>
Deyth Banger
</figcaption>
</figure>
<figure
class="long"
id=michelle-barker
data-presentation="Sprint 1,Trucjes met CSS 1"
data-labels="development css js learning">
<blockquote cite="#">
<p>
Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s really no substitute for learning by doing.
</p>
</blockquote>
<figcaption>
Michelle Barker
</figcaption>
</figure>
<figure
class="long"
id=mehmet-murat-ildan
data-presentation="Sprint 1,Trucjes met CSS 1"
data-labels="life">
<blockquote cite="#">
<p>
There is a hidden message in every waterfall. It says, if you are flexible, falling will not hurt you.
</p>
</blockquote>
<figcaption>
Mehmet Murat Ildan
</figcaption>
</figure>
<figure
class=""
id=david-kelley
data-presentation="Sprint 1,Visitekaartje"
data-labels="design process">
<blockquote cite="#">
<p>
Fail faster, so you can succeed sooner.
</p>
</blockquote>
<figcaption>
David Kelley
</figcaption>
</figure>
<figure
class="long"
id=cristhopher-miller
data-presentation="Sprint 1,Visitekaartje"
data-labels="design development">
<blockquote cite="#">
<p>
With a bucket of Lego, you can tell any story. You can build an airplane or a dragon or a pirate ship - it's whatever you can imagine.
</p>
</blockquote>
<figcaption>
Cristhopher Miller
</figcaption>
</figure>
<figure
class=""
id=walt-disney
data-presentation="Sprint 1,Visitekaartje"
data-labels="design process">
<blockquote cite="https://en.wikipedia.org/wiki/Walt_Disney">
<p>
If you can visualize it, if you can dream it, there's some way to do it.
</p>
</blockquote>
<figcaption>
Walt Disney
</figcaption>
</figure>
<figure
class="long"
id=salam-al-shereida
data-presentation="Sprint 1,Visitekaartje"
data-labels="life">
<blockquote cite="#">
<p>
On all occasions there are better solutions waiting us to be found if we do subtle analysis with sharp-witted minds.
</p>
</blockquote>
<figcaption>
Prof. Salam Al Shereida
</figcaption>
</figure>
<footer>
Footer
</footer>
<script>
//<button class=deeplink>#</button>
//elke quote een button met de achor link
var quotes = document.querySelectorAll("figure");
for(var q of quotes){
var btn = document.createElement("button");
q.appendChild(btn);
btn.textContent = "#";
btn.classList.add("deeplink");
btn.addEventListener('click', function() {
window.location.href = '#'+this.parentElement.id;
});
}
</script>
</body>
</html>