-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
691 lines (668 loc) · 35.5 KB
/
Copy pathindex.html
File metadata and controls
691 lines (668 loc) · 35.5 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
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
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syllabus — Free Bootstrap 6 Online Course & E-Learning Template</title>
<meta name="description" content="Syllabus is a free Bootstrap 6 e-learning template whose curriculum ticks off, remembers your progress, and turns your available hours a week into a real finish date.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-lessons='{"l1": 9, "l2": 14, "l3": 17, "l4": 25, "l5": 11, "l6": 13, "l7": 16, "l8": 12, "l9": 30, "l10": 15, "l11": 12, "l12": 18, "l13": 22, "l14": 35, "l15": 14, "l16": 13, "l17": 16, "l18": 11, "l19": 19, "l20": 40, "l21": 14, "l22": 12, "l23": 17, "l24": 10, "l25": 35, "l26": 15, "l27": 13, "l28": 14, "l29": 18, "l30": 30, "l31": 21, "l32": 16, "l33": 19, "l34": 90}'>
<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>
<header class="site-header">
<nav class="navbar lg:navbar-expand" aria-label="Main">
<div class="container">
<a class="wordmark" href="index.html"><svg class="brand-glyph" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M2.5 5.5A2 2 0 0 1 4.5 3.5H11v17H4.5a2 2 0 0 1-2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M21.5 5.5a2 2 0 0 0-2-2H13v17h6.5a2 2 0 0 0 2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" opacity=".45"/>
</svg><span>Syllabus</span></a>
<dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body mb-2 lg:mb-0">
<ul class="nav navbar-nav ms-auto lg:gap-4">
<li class="nav-item"><a class="nav-link" href="#outcomes">What you'll learn</a></li>
<li class="nav-item"><a class="nav-link" href="#curriculum">Curriculum</a></li>
<li class="nav-item"><a class="nav-link" href="lesson.html">Sample lesson</a></li>
<li class="nav-item"><a class="nav-link" href="#teacher">Who teaches it</a></li>
</ul>
</div>
</dialog>
<div class="d-flex align-items-center gap-2 ms-auto">
<button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
</button>
<a class="btn-solid theme-primary" href="#enrol">Enrol — £180</a>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</header>
<section class="hero">
<div class="container">
<div class="row g-6 align-items-center">
<div class="lg:col-7">
<p class="pill mb-4">A single course · no cohort, no expiry</p>
<h1 class="hero-title display-serif fs-5xl mb-4">Typography for interfaces.</h1>
<p class="hero-lede fs-lg fg-2 mb-5">
34 lessons and 11h 26m on the part of interface work
nobody taught you: choosing type for a reason, building a scale that
survives real content, and setting text that people can actually read.
</p>
<div class="d-flex flex-wrap gap-3 mb-4">
<a class="btn-solid theme-primary btn-lg" href="#enrol">Enrol — £180</a>
<a class="btn-outline theme-secondary btn-lg" href="lesson.html">Watch a lesson free</a>
</div>
<p class="fs-sm fg-3 mb-0">30-day refund, no questions. Access does not expire.</p>
</div>
<div class="lg:col-5">
<div class="ph ph-4x3 framed"><img src="img/hero.jpg" alt="Type specimens laid out on a desk" width="900" height="675" loading="eager"></div>
</div>
</div>
</div>
</section>
<main id="main">
<!-- Outcomes -->
<section class="section" id="outcomes">
<div class="container">
<div class="row g-5 mb-6 align-items-end">
<div class="lg:col-7">
<p class="eyebrow-rule mb-3">What you'll learn</p>
<h2 class="section-title display-serif fs-4xl mb-0">Six things you will be able to do afterwards</h2>
</div>
<div class="lg:col-5">
<p class="fg-2 mb-0">
Not "understand" or "appreciate" — do, on Monday, in the file you
already have open.
</p>
</div>
</div>
<div class="row g-4">
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">01</span><h3 class="fs-lg mb-2">Pick a typeface you can defend</h3><p class="fg-2 fs-sm mb-0">Work from the brief and the content rather than the mood board, and say out loud why this one and not that one.</p></article></div>
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">02</span><h3 class="fs-lg mb-2">Build a scale that holds up</h3><p class="fg-2 fs-sm mb-0">Set a modular scale in code, then know exactly where to break it when a real screen demands it.</p></article></div>
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">03</span><h3 class="fs-lg mb-2">Set long text properly</h3><p class="fg-2 fs-sm mb-0">Measure, leading, hyphenation and the punctuation you have been getting wrong since school.</p></article></div>
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">04</span><h3 class="fs-lg mb-2">Make dense screens readable</h3><p class="fg-2 fs-sm mb-0">Tables, labels, numerals and truncation — where typography stops being decoration and starts being load-bearing.</p></article></div>
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">05</span><h3 class="fs-lg mb-2">Meet accessibility properly</h3><p class="fg-2 fs-sm mb-0">Contrast against strokes not boxes, spacing requirements, and reflow at 400% without a horizontal scrollbar.</p></article></div>
<div class="md:col-6 lg:col-4"><article class="outcome surface surface-pad lift h-100"><span class="outcome-no">06</span><h3 class="fs-lg mb-2">Ship it and keep it</h3><p class="fg-2 fs-sm mb-0">Subsetting, fallback stacks that do not shift the layout, and writing the type section of a design system.</p></article></div>
</div>
</div>
</section>
<!-- Curriculum -->
<section class="section bg-2" id="curriculum">
<div class="container">
<div class="row g-5 mb-6 align-items-end">
<div class="lg:col-7">
<p class="eyebrow-rule mb-3">Curriculum</p>
<h2 class="section-title display-serif fs-4xl mb-0">7 modules, 34 lessons, 11h 26m</h2>
</div>
<div class="lg:col-5">
<p class="fg-2 mb-0">
Tick lessons off as you go — it is remembered in this browser, with
no account to make. The planner works out when you would finish.
</p>
</div>
</div>
<div class="row g-5">
<div class="lg:col-8">
<div class="modules" data-curriculum>
<details class="module" open>
<summary>
<span class="module-no">01</span>
<span class="module-head">
<span class="module-title">Reading type before you set it</span>
<span class="module-meta">4 lessons · 1h 5m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">Before any of the craft, the part most courses skip: learning to actually see what a typeface is doing.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l1" data-lesson="l1" data-min="9">
<label for="l1">
<span class="lesson-title">Why screen type is a different problem</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">9 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l2" data-lesson="l2" data-min="14">
<label for="l2">
<span class="lesson-title">Anatomy without the vocabulary test</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">14 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l3" data-lesson="l3" data-min="17">
<label for="l3">
<span class="lesson-title">Seeing rhythm, colour and texture</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">17 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l4" data-lesson="l4" data-min="25">
<label for="l4">
<span class="lesson-title">Exercise: annotate three interfaces</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">25 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">02</span>
<span class="module-head">
<span class="module-title">Choosing, and defending the choice</span>
<span class="module-meta">5 lessons · 1h 22m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">How to pick a typeface for a reason you can say out loud in a review.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l5" data-lesson="l5" data-min="11">
<label for="l5">
<span class="lesson-title">What a brief actually constrains</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">11 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l6" data-lesson="l6" data-min="13">
<label for="l6">
<span class="lesson-title">Superfamilies, and when you don't need one</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">13 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l7" data-lesson="l7" data-min="16">
<label for="l7">
<span class="lesson-title">Testing a face against real content</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">16 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l8" data-lesson="l8" data-min="12">
<label for="l8">
<span class="lesson-title">Licensing without the panic</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">12 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l9" data-lesson="l9" data-min="30">
<label for="l9">
<span class="lesson-title">Exercise: shortlist and justify</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">30 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">03</span>
<span class="module-head">
<span class="module-title">Scale, rhythm and the vertical grid</span>
<span class="module-meta">6 lessons · 1h 56m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">The module people come back to. Building a type scale that survives contact with a real product.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l10" data-lesson="l10" data-min="15">
<label for="l10">
<span class="lesson-title">Modular scales, and their limits</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">15 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l11" data-lesson="l11" data-min="12">
<label for="l11">
<span class="lesson-title">Line height is a ratio, not a number</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">12 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l12" data-lesson="l12" data-min="18">
<label for="l12">
<span class="lesson-title">Optical sizing and why 14px lies</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">18 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l13" data-lesson="l13" data-min="22">
<label for="l13">
<span class="lesson-title">Building the scale in code</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">22 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l14" data-lesson="l14" data-min="35">
<label for="l14">
<span class="lesson-title">Exercise: retype a settings page</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">35 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l15" data-lesson="l15" data-min="14">
<label for="l15">
<span class="lesson-title">Review: common scale failures</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">14 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">04</span>
<span class="module-head">
<span class="module-title">Setting long-form text</span>
<span class="module-meta">5 lessons · 1h 39m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">Measure, hyphenation, widows, and the parts of CSS text layout nobody teaches.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l16" data-lesson="l16" data-min="13">
<label for="l16">
<span class="lesson-title">Measure: the 45–75 myth, examined</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">13 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l17" data-lesson="l17" data-min="16">
<label for="l17">
<span class="lesson-title">Hyphenation and justification on the web</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">16 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l18" data-lesson="l18" data-min="11">
<label for="l18">
<span class="lesson-title">text-wrap: balance and pretty, in practice</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">11 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l19" data-lesson="l19" data-min="19">
<label for="l19">
<span class="lesson-title">Quotes, dashes and the rest of the punctuation you are getting wrong</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">19 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l20" data-lesson="l20" data-min="40">
<label for="l20">
<span class="lesson-title">Exercise: set a 2,000-word article</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">40 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">05</span>
<span class="module-head">
<span class="module-title">Interface type at small sizes</span>
<span class="module-meta">5 lessons · 1h 28m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">Labels, tables, numerals and the dense screens where typography is load-bearing.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l21" data-lesson="l21" data-min="14">
<label for="l21">
<span class="lesson-title">Tabular numerals and aligning money</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">14 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l22" data-lesson="l22" data-min="12">
<label for="l22">
<span class="lesson-title">Labels, captions and the 12px floor</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">12 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l23" data-lesson="l23" data-min="17">
<label for="l23">
<span class="lesson-title">Type in tables without a scrollbar</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">17 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l24" data-lesson="l24" data-min="10">
<label for="l24">
<span class="lesson-title">Truncation is a design decision</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">10 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l25" data-lesson="l25" data-min="35">
<label for="l25">
<span class="lesson-title">Exercise: a dense dashboard</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">35 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">06</span>
<span class="module-head">
<span class="module-title">Accessibility as typography</span>
<span class="module-meta">5 lessons · 1h 30m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">Contrast, spacing and reflow — the accessibility work that is genuinely typographic.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l26" data-lesson="l26" data-min="15">
<label for="l26">
<span class="lesson-title">Contrast is about the strokes, not the box</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">15 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l27" data-lesson="l27" data-min="13">
<label for="l27">
<span class="lesson-title">Letter, word and line spacing requirements</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">13 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l28" data-lesson="l28" data-min="14">
<label for="l28">
<span class="lesson-title">Reflow at 400% zoom</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">14 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l29" data-lesson="l29" data-min="18">
<label for="l29">
<span class="lesson-title">Dyslexia-friendly: what the research says</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">18 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l30" data-lesson="l30" data-min="30">
<label for="l30">
<span class="lesson-title">Exercise: audit your own product</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">30 min</span>
</li>
</ul>
</div>
</details>
<details class="module" >
<summary>
<span class="module-no">07</span>
<span class="module-head">
<span class="module-title">Shipping and defending it</span>
<span class="module-meta">4 lessons · 2h 26m · <span data-module-done>0</span> done</span>
</span>
</summary>
<div class="module-body">
<p class="fg-2 fs-sm mb-3">Getting the work into production and keeping it there after you move on.</p>
<ul class="lesson-list">
<li class="lesson">
<input type="checkbox" class="check" id="l31" data-lesson="l31" data-min="21">
<label for="l31">
<span class="lesson-title">Variable fonts, subsetting and the byte budget</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">21 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l32" data-lesson="l32" data-min="16">
<label for="l32">
<span class="lesson-title">Fallback stacks that don't shift the layout</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">16 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l33" data-lesson="l33" data-min="19">
<label for="l33">
<span class="lesson-title">Writing the type section of a design system</span>
<span class="lesson-kind kind-video">video</span>
</label>
<span class="lesson-min">19 min</span>
</li>
<li class="lesson">
<input type="checkbox" class="check" id="l34" data-lesson="l34" data-min="90">
<label for="l34">
<span class="lesson-title">Final project: a complete type system</span>
<span class="lesson-kind kind-task">task</span>
</label>
<span class="lesson-min">90 min</span>
</li>
</ul>
</div>
</details>
</div>
</div>
<div class="lg:col-4">
<div class="tracker" data-tracker>
<div class="tracker-top">
<div>
<p class="tracker-k mb-1">Your progress</p>
<p class="tracker-v mb-0"><span data-done>0</span> of 34 lessons</p>
</div>
<div class="text-end">
<p class="tracker-k mb-1">Left to watch</p>
<p class="tracker-v mb-0" data-remaining>11h 26m</p>
</div>
</div>
<div class="progress mb-4" role="progressbar" aria-label="Course progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-bar-wrap>
<div class="progress-bar" style="width:0%" data-bar></div>
</div>
<label class="form-label" for="paceHours">Hours you can give it a week</label>
<output class="tracker-out" id="paceOut" for="paceHours">3 hours</output>
<div class="form-range mb-3">
<input type="range" class="form-range-input" id="paceHours" min="1" max="20" step="1" value="3">
</div>
<p class="tracker-eta mb-3" data-eta></p>
<button class="btn-text theme-secondary tracker-reset" type="button" data-reset>Clear my progress</button>
</div>
</div>
</div>
</div>
</section>
<!-- Teacher -->
<section class="section" id="teacher">
<div class="container">
<div class="row g-6 align-items-center">
<div class="lg:col-5">
<div class="ph ph-3x4 framed"><img src="img/teacher.jpg" alt="Marit Halvorsen" width="700" height="933" loading="lazy"></div>
</div>
<div class="lg:col-7">
<p class="eyebrow-rule mb-3">Who teaches it</p>
<h2 class="section-title display-serif fs-4xl mb-4">Marit Halvorsen</h2>
<p class="fg-2 mb-4">
Marit has spent eighteen years setting type on screens — six of them
on a banking app used by nine million people, where a 13px label
being wrong meant someone misread their balance.
</p>
<p class="fg-2 mb-4">
She is not a type designer and says so early. This is a course about
<em>using</em> type well, taught by someone who has had to defend
every decision in it to an engineer, a lawyer and a brand team, often
in the same week.
</p>
<dl class="facts">
<div><dt>Teaching since</dt><dd>2018</dd></div>
<div><dt>Students</dt><dd>4,100</dd></div>
<div><dt>Average rating</dt><dd>4.8 / 5 from 812 reviews</dd></div>
<div><dt>Answers questions</dt><dd>Herself, usually within two days</dd></div>
</dl>
</div>
</div>
</div>
</section>
<!-- Reviews -->
<section class="section bg-2">
<div class="container">
<div class="row g-4">
<div class="lg:col-4"><figure class="review surface surface-pad h-100">
<blockquote class="mb-4"><p class="mb-0">The line-height module rewrote how I brief engineers. I had been asking for the wrong thing for six years.</p></blockquote>
<figcaption><p class="fw-semibold mb-0">Nadia Osei</p><p class="fg-3 fs-sm mb-0">Design lead, healthcare</p></figcaption>
</figure></div>
<div class="lg:col-4"><figure class="review surface surface-pad h-100">
<blockquote class="mb-4"><p class="mb-0">I came for the scale-building and stayed for the punctuation lesson, which I have now made three colleagues watch.</p></blockquote>
<figcaption><p class="fw-semibold mb-0">Wes Tremayne</p><p class="fg-3 fs-sm mb-0">Product designer</p></figcaption>
</figure></div>
<div class="lg:col-4"><figure class="review surface surface-pad h-100">
<blockquote class="mb-4"><p class="mb-0">It never once told me a rule without telling me when to break it. That is the whole difference.</p></blockquote>
<figcaption><p class="fw-semibold mb-0">Priya Anand</p><p class="fg-3 fs-sm mb-0">Front-end engineer</p></figcaption>
</figure></div>
</div>
</div>
</section>
<!-- Enrol -->
<section class="section" id="enrol">
<div class="container">
<div class="row g-5 align-items-center">
<div class="lg:col-6">
<p class="eyebrow-rule mb-3">Enrol</p>
<h2 class="section-title display-serif fs-4xl mb-4">One price, everything in it</h2>
<ul class="tick-list mb-0">
<li>All 34 lessons, 11h 26m of material</li>
<li>Seven exercises with worked examples</li>
<li>Written critique of your final project</li>
<li>Lifetime access, including future revisions</li>
<li>30-day refund, one email, no conversation</li>
</ul>
</div>
<div class="lg:col-6">
<div class="enrol">
<p class="enrol-price mb-1">£180<small> one payment</small></p>
<p class="fg-3 fs-sm mb-4">Or three payments of £62. Students and anyone between jobs pay £90 — just ask, no proof needed.</p>
<form id="enrolForm" data-demo-form novalidate>
<label class="form-label" for="enrolEmail">Email address</label>
<input class="form-control mb-3" type="email" id="enrolEmail" name="email" required>
<div class="invalid-feedback mb-3">We need an address to send access to.</div>
<button class="btn-solid theme-primary btn-lg w-100" type="submit" data-done-text="Check your inbox ✓">Enrol now</button>
</form>
<p class="fs-xs fg-3 mt-3 mb-0">Frontend-only demo form — nothing is sent anywhere.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section bg-2" id="faq">
<div class="container">
<div class="row g-6">
<div class="lg:col-5">
<p class="eyebrow-rule mb-3">Questions</p>
<h2 class="section-title display-serif fs-4xl mb-4">Asked often enough to answer here</h2>
<p class="fg-2 mb-0">
Anything else, write to
<a href="mailto:marit@syllabus.example">marit@syllabus.example</a> —
it goes to her, not a queue.
</p>
</div>
<div class="lg:col-7">
<div class="faq">
<details name="faq">
<summary>Do I need design training to take this?</summary>
<div class="faq-body"><p class="fg-2 mb-0">No. It assumes you can already build or design an interface and that nobody ever taught you type. Engineers take it as often as designers do, and the code sections use plain CSS.</p></div>
</details>
<details name="faq">
<summary>How long does it actually take?</summary>
<div class="faq-body"><p class="fg-2 mb-0">Around eleven and a half hours of material, and most people finish in six to ten weeks. The planner above turns your available hours into a real date rather than making you guess.</p></div>
</details>
<details name="faq">
<summary>Is there a deadline?</summary>
<div class="faq-body"><p class="fg-2 mb-0">No. Access does not expire, the exercises have no due dates, and nothing is drip-fed. If you disappear for four months your ticks are still here.</p></div>
</details>
<details name="faq">
<summary>Will I get feedback on the exercises?</summary>
<div class="faq-body"><p class="fg-2 mb-0">On the final project, yes — a written critique within ten working days. The other exercises are self-directed with a worked example to compare against.</p></div>
</details>
<details name="faq">
<summary>What if it isn't for me?</summary>
<div class="faq-body"><p class="fg-2 mb-0">Full refund within 30 days, no form and no conversation about it. Email once and it is done.</p></div>
</details>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer section pb-5">
<div class="container">
<div class="row g-5">
<div class="lg:col-5">
<p class="wordmark mb-3"><svg class="brand-glyph" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M2.5 5.5A2 2 0 0 1 4.5 3.5H11v17H4.5a2 2 0 0 1-2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M21.5 5.5a2 2 0 0 0-2-2H13v17h6.5a2 2 0 0 0 2-2v-13Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" opacity=".45"/>
</svg><span>Syllabus</span></p>
<p class="fg-2 fs-sm mb-0" style="max-width:24rem">
One course, taught properly, by someone who does the work. No cohort,
no deadline, no expiry.
</p>
</div>
<div class="md:col-6 lg:col-3">
<p class="eyebrow fs-xs fg-3 mb-3">Course</p>
<ul class="link-list"><li><a href="index.html#outcomes">What you'll learn</a></li><li><a href="index.html#curriculum">Curriculum</a></li><li><a href="lesson.html">Sample lesson</a></li><li><a href="index.html#faq">Questions</a></li></ul>
</div>
<div class="md:col-6 lg:col-4">
<p class="eyebrow fs-xs fg-3 mb-3">Your progress</p>
<p class="fg-2 fs-sm mb-0">
Ticks are stored in this browser only — nothing is sent anywhere and
there is no account. Clearing site data clears your progress, which is
the honest trade for not asking you to sign up.
</p>
</div>
</div>
<hr class="my-5">
<p class="fs-xs fg-3 mb-0">© <span data-year>2026</span> Syllabus — a free Bootstrap 6 template. The course, its teacher and every review here are fictional.</p>
</div>
</footer>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>