Skip to content

Commit eea221b

Browse files
culasculas
authored
Merge pull request #29 from webplatformz/update-and-cleanup
Update and cleanup
2 parents 2a03ed9 + 8fe4996 commit eea221b

10 files changed

Lines changed: 119 additions & 166 deletions

File tree

‎assets/portraits/foma.jpeg‎

82.9 KB
Loading

‎chapters/basics.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>CSS Basics</title>
77

88
<link rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css">
9+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css">
1010
<link rel="stylesheet" href="../utils.css">
1111
</head>
1212
<body>
@@ -664,7 +664,7 @@ <h1>Questions?</h1>
664664

665665
</div>
666666
</div>
667-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
667+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
668668
<script>
669669
setupZuehlkeRevealPresentation();
670670
</script>

‎chapters/concepts.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>CSS Concepts</title>
77

88
<link rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css">
9+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css">
1010
<link rel="stylesheet" href="../utils.css">
1111
<link rel="stylesheet" href="concepts.css">
1212
</head>
@@ -408,7 +408,7 @@ <h1>Questions?</h1>
408408

409409
</div>
410410
</div>
411-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
411+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
412412
<script>
413413
setupZuehlkeRevealPresentation();
414414
</script>

‎chapters/flex.html‎

Lines changed: 2 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Flexbox layout</title>
77

88
<link rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css">
9+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css">
1010
<link rel="stylesheet" href="flex.css"/>
1111
</head>
1212
<body>
@@ -451,51 +451,6 @@ <h3>flex-shrink</h3>
451451
<div class="fragment tip">flex-shrink only applies if the children are larger than the container!</div>
452452
</section>
453453

454-
<section>
455-
<p>What if we change the order in which individual elements appear?</p>
456-
<div class="flex-example-parent-horizontal">
457-
<div>Item 1</div>
458-
<div>Item 2</div>
459-
<div>Item 3</div>
460-
</div>
461-
vs.
462-
<div class="flex-example-parent-horizontal">
463-
<div>Item 1</div>
464-
<div style="order: -1">Item 2</div>
465-
<div>Item 3</div>
466-
</div>
467-
<aside class="notes">
468-
Here it would be interesting to talk about media queries and the importance of order in that context
469-
but that concept might not have been introduced yet at this point.
470-
</aside>
471-
</section>
472-
473-
<section>
474-
<h3>order</h3>
475-
<ul>
476-
<li>child elements can have an individual order</li>
477-
<li>default is 0</li>
478-
</ul>
479-
<div style="display: flex; row-gap: 1rem; flex-direction: column">
480-
<div class="flex-example-parent-horizontal">
481-
<div style="order: 1">order: 1</div>
482-
<div style="order: 5">order: 5</div>
483-
<div style="order: -1">order: -1</div>
484-
<div style="order: 3">order: 3</div>
485-
<div style="order: 2">order: 2</div>
486-
</div>
487-
</div>
488-
<pre><code class="hljs html" data-trim data-noescape>
489-
&lt;div&gt;
490-
&lt;div style=&quot;order: 1&quot;&gt;order: 1&lt;/div&gt;
491-
&lt;div style=&quot;order: 5&quot;&gt;order: 5&lt;/div&gt;
492-
&lt;div style=&quot;order: -1&quot;&gt;order: -1&lt;/div&gt;
493-
&lt;div style=&quot;order: 3&quot;&gt;order: 3&lt;/div&gt;
494-
&lt;div style=&quot;order: 2&quot;&gt;order: 2&lt;/div&gt;
495-
&lt;/div&gt;
496-
</code></pre>
497-
<div class="fragment tip">Use order with care, it can be unintuitive</div>
498-
</section>
499454
</section>
500455

501456
<section>
@@ -621,46 +576,6 @@ <h3>gap / row-gap / column-gap</h3>
621576
}
622577
</code></pre>
623578
</section>
624-
625-
<section>
626-
<h3>align-content</h3>
627-
<p>Control how extra space on the cross axis is allocated</p>
628-
<div class="flex-example-parent-horizontal"
629-
style="flex-wrap: wrap; height: 180px; align-content: stretch">
630-
<div>Item 1</div>
631-
<div>Item 2</div>
632-
<div>Item 3</div>
633-
<div>Item 4</div>
634-
<div>Item 5</div>
635-
<div>Item 6</div>
636-
<div>Item 7</div>
637-
<div>Item 8</div>
638-
<div>Item 9</div>
639-
<div>Item 10</div>
640-
<div>Item 11</div>
641-
<div>Item 12</div>
642-
<div>Item 13</div>
643-
</div>
644-
<small>align-content: stretch</small>
645-
<div class="flex-example-parent-horizontal"
646-
style="flex-wrap: wrap; height: 180px; align-content: space-between">
647-
<div>Item 1</div>
648-
<div>Item 2</div>
649-
<div>Item 3</div>
650-
<div>Item 4</div>
651-
<div>Item 5</div>
652-
<div>Item 6</div>
653-
<div>Item 7</div>
654-
<div>Item 8</div>
655-
<div>Item 9</div>
656-
<div>Item 10</div>
657-
<div>Item 11</div>
658-
<div>Item 12</div>
659-
<div>Item 13</div>
660-
</div>
661-
<small>align-content: space-between</small>
662-
<div class="fragment tip">only applies if elements wrap</div>
663-
</section>
664579
</section>
665580

666581
<section>
@@ -808,7 +723,7 @@ <h1>Questions?</h1>
808723
</section>
809724
</div>
810725
</div>
811-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
726+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
812727
<script>
813728
setupZuehlkeRevealPresentation();
814729
</script>

‎chapters/grid.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<link
99
rel="stylesheet"
10-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css"
10+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css"
1111
/>
1212
<link rel="stylesheet" href="grid.css"/>
1313
</head>
@@ -629,7 +629,7 @@ <h1>Questions?</h1>
629629
</section>
630630
</div>
631631
</div>
632-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
632+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
633633
<script>
634634
setupZuehlkeRevealPresentation();
635635
</script>

‎chapters/intro.html‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,15 @@
66
<title>CSS Basics</title>
77

88
<link rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css">
9+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css">
1010
<link rel="stylesheet" href="../utils.css">
1111
</head>
1212
<body>
1313
<div class="reveal">
1414
<div class="slides">
1515
<section class="title-slide">
1616
<h1>CSS for Developers</h1>
17-
<h2>Lucas Schnüriger</h2>
18-
<h3>Course Introduction</h3>
17+
<h2>Course Introduction</h2>
1918
</section>
2019

2120
<section>
@@ -30,6 +29,10 @@ <h2>About us</h2>
3029
<img src="../assets/portraits/lusc.jpeg" alt="Portrait of Lucas Schnüriger">
3130
<h3>Lucas Schnüriger</h3>
3231
</div>
32+
<div class="profile">
33+
<img src="../assets/portraits/foma.jpeg" alt="Portrait of Marco Forster">
34+
<h3>Marco Forster</h3>
35+
</div>
3336
</div>
3437
</section>
3538

@@ -46,13 +49,28 @@ <h1>Course goal</h1>
4649

4750
<section>
4851
<h2>Schedule</h2>
49-
<ul>
50-
<li>09:00 Start</li>
51-
<li>10:30 – 10:45 Quick Coffee/Toilet Break</li>
52-
<li>12:30 – 13:30 Lunch Break</li>
53-
<li>15:00 – 15:15 Coffee Break</li>
54-
<li>17:00 End</li>
55-
</ul>
52+
<div class="comparison">
53+
<div>
54+
<h3>Day 1</h3>
55+
<ul>
56+
<li>09:30 – Start, Intro</li>
57+
<li>09:40 – Basics, Concepts</li>
58+
<li>10:50 – Break ☕️</li>
59+
<li>11:05 – Flex</li>
60+
<li>12:30 – End of Day 1</li>
61+
</ul>
62+
</div>
63+
<div>
64+
<h3>Day 2</h3>
65+
<ul>
66+
<li>09:30 – Recap</li>
67+
<li>09:40 – Grid</li>
68+
<li>10:50 – Break ☕️</li>
69+
<li>11:05 – Various, Tailwind, Tooling</li>
70+
<li>12:30 – End</li>
71+
</ul>
72+
</div>
73+
</div>
5674
</section>
5775

5876
<section>
@@ -71,8 +89,8 @@ <h1>Questions?</h1>
7189
</section>
7290
</div>
7391
</div>
74-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
92+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
7593
<script>
76-
setupZuehlkeRevealPresentation();
94+
setupZuehlkeRevealPresentation();
7795
</script>
7896
</body>

‎chapters/tailwind.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>CSS Basics</title>
77

88
<link rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css">
9+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css">
1010
</head>
1111
<body>
1212
<div class="reveal">
@@ -173,7 +173,7 @@ <h1>Questions?</h1>
173173

174174
</div>
175175
</div>
176-
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
176+
<script src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
177177
<script>
178178
setupZuehlkeRevealPresentation();
179179
</script>

‎chapters/tooling.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>Tooling</title>
88

99
<link rel="stylesheet"
10-
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.css" />
10+
href="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.css" />
1111
</head>
1212

1313
<body>
@@ -182,7 +182,7 @@ <h1>Questions?</h1>
182182
</div>
183183
</div>
184184
<script
185-
src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@12d464d3ae3c5bbe96af93ece05bd5ebeaabefbe/release/index.js"></script>
185+
src="https://cdn.jsdelivr.net/gh/Zuehlke/zuehlke-reveal-package@f42658c99dec0812d754d935263a70b93b81f54b/release/index.js"></script>
186186
<script>
187187
setupZuehlkeRevealPresentation();
188188
</script>

0 commit comments

Comments
 (0)