-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
399 lines (330 loc) · 12.7 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSSclasses</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/cssclasses.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal/lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'reveal/css/print/pdf.css' : 'reveal/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="reveal/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src="assets/cssclasses-logo.svg" alt="CSSclasses" class="img--no-border-shadow">
<p>
<small>Presented by CSSconf EU and OpenTechSchool</small>
</p>
</section>
<section>
<h2>Code of Conduct</h2>
<a href="//cssclass.es/code-of-conduct/">cssclass.es/code-of-conduct/</a>
<p>
tl;dr: Be excellent with each other
</p>
</section>
<section>
<h2>OpenTechSchool Core Values</h2>
<ul>
<li class="fragment">Openness</li>
<li class="fragment">Transparency</li>
<li class="fragment">Empowerment</li>
<li class="fragment">Hands-on learning</li>
<li class="fragment">Welcoming learning environment</li>
<li class="fragment">Not for profit</li>
</ul>
</section>
<section>
<section>
<h2>Coaching Guidelines</h2>
<a href="http://bit.ly/2dHs4Fa">http://bit.ly/2dHs4Fa</a>
</section>
<section>
<h3>Was sind unsere Ziele?</h3>
<ul>
<li class="fragment">Zeigen dass CSS Spaß macht</li>
<li class="fragment">und niemand Angst vor dem Coden haben muss.</li>
</ul>
</section>
<section>
<h3>Lernmaterialien</h3>
<p class="fragment"><b>keine</b> <i>Lehrmaterialien</i></p>
<ul>
<li class="fragment">praxisorientiert und pragmatisch</li>
<li class="fragment">dafür ausgelegt im <b>eigenen Tempo</b> bearbeitet zu werden</li>
</ul>
</section>
<section>
<h3>Coaching isn't teaching…</h3>
<p class="fragment">Wir machen <b>keinen</b> Frontalunterricht!</p>
<ul class="fragment">
<p>Coaches…</p>
<li>sind da wenn sie gebraucht werden</li>
<li class="fragment">konzentrieren sich auf die Lernenden</li>
<li class="fragment">berücksichtigen deren Kenntnisstand</li>
<li class="fragment">und ermutigen sie weiterzumachen.</li>
</ul>
</section>
<section>
<h3>Erzeuge eine freundliche Atmosphäre</h3>
<ul>
<li class="fragment">indem Du höflich und freundlich bist</li>
<li class="fragment">Augenkontakt herstellst</li>
<li class="fragment">indem Du zugibst wenn Du etwas nicht weißt</li>
<li class="fragment">den Lernenden sagst dass es ok ist Fehler zu machen</li>
<li class="fragment">und dass sie eine Pause machen sollen wenn es frustrierend wird.</li>
</ul>
</section>
<section>
<ul>
<li>Setze kein Wissen voraus, aber gehe davon aus dass sie unendlich intelligent sind</li>
<li class="fragment">Benutze normale Sprache ohne Slang</li>
</ul>
</section>
<section>
<ul>
<li>Stelle sicher dass sie das was Du gesagt hast auch verstanden haben</li>
<li class="fragment">und erklärt es nochmal, aber anders, falls das nicht der Fall ist.</li>
</ul>
</section>
<section>
<h3>Lernende ermutigen</h3>
<ul>
<li>Ermutige sie selbständig herumzuspielen</li>
<li class="fragment">Was auch immer sie machen: es ist großartig und schön!</li>
</ul>
</section>
<section>
<h3>Fragen</h3>
<ul>
<li class="fragment">Schaue Dich um ob jemand Probleme hat</li>
<li class="fragment">Manchmal trauen sie sich nur nicht zu fragen</li>
</ul>
</section>
<section>
<ul>
<li>Frage ab und zu: “Wie läuft es? Kann ich Dir mit irgendwas helfen?”</li>
<ul>
<li class="fragment">Das ist ein mächtiges Werkzeug: Es hilft Lernenden die schüchtern sind und erzeugt Dialog.</li>
<li class="fragment">Ein anderer Trick: Setze Dich neben sie und unterhalte Dich mit ihnen über das was sie gerade machen.</li>
</ul>
</ul>
</section>
<section>
<h3>Fragen sind gut!</h3>
<ul>
<li class="fragment">Sorge dafür dass die Leute sich daran gewöhnen Fragen zu stellen</li>
<li class="fragment">Betone dass es so etwas wie “dumme” Fragen nicht gibt</li>
<li class="fragment">Gib anderen Lernenden die Chance die Frage zu beantworten</li>
<li class="fragment">Coding bedeutet Kollaboration – sorge dafür dass Lernende das verstehen!</li>
</ul>
</section>
<section>
<h3>Fragen beantworten</h3>
<ul>
<p>Wie antwortest Du?</p>
<li class="fragment">Positiv:</li>
<ul>
<li class="fragment">“Gut dass Du fragst!”</li>
<li class="fragment">“Gute Frage!”</li>
<li class="fragment">“Hm, da bin ich mir nicht sicher. Lass uns in der Dokumentation nachschauen.”</li>
</ul>
<li class="fragment">Im Zweifel liegt das Problem immer in den Lernmaterialien, nie bei den Lernenden!</li>
</ul>
</section>
<section>
<h3>Fragen beantworten</h3>
<ul>
<p>Frage beantwortet. Was nun?</p>
<li class="fragment">Wir versuchen unsere Lernmaterialien kontinuierlich zu verbessern.</li>
<li class="fragment">Versuche Dir Notizen zu der Frage zu machen, sodass Du sie nicht vergisst.</li>
<li class="fragment">Erstelle eine Issue nach dem Workshop (GitHub).</li>
</ul>
</section>
<section>
<h3>Geschwindigkeit</h3>
<ul>
<li class="fragment">Es geht nicht um Dich, es geht um die Lernenden. Wir gehen ihr Tempo.</li>
<li class="fragment">Jede Person lernt in ihrer eigenen Geschwindigkeit. Und das ist gut so!</li>
<li class="fragment">Wir reden langsam.</li>
<li class="fragment">Warte mit Fragen oder Kommentare sehr viel länger als als es sich eigentlich gut anfühlt (zähle im Kopf bis zehn).</li>
</ul>
</section>
<section>
<h3>Sei ermutigend</h3>
<ul>
<li class="fragment">Akzeptiere es nicht wenn jemand sagt sie wären zu <i>irgendwas</i> um das zu schaffen. Antworte ihnen dass sie es schaffen können.</li>
<li class="fragment">Gratuliere Leuten zu ihren Ergebnissen, und gib ihnen Zeit sie Dir zu zeigen.</li>
</ul>
</section>
<section>
<ul>
<li>Wenn Leute vom vorgesehenen Pfad abweichen, aber Spaß dabei haben, ermutige sie weiterzugehen.</li>
<li class="fragment">Ermutige Lernende anderen ihre Ergebnisse zu zeigen. Sei hartnäckig damit, falls nötig.</li>
</ul>
</section>
<section data-background="#e04c3e">
<h3>Dont's</h3>
<p>ein paar Dinge die wir <b>nicht</b> tun…</b>
</section>
<section>
<h3>Dont's</h3>
<ul>
<li>Wir graben niemanden an, und machen auch keine suggestive Bemerkungen!</li>
<li class="fragment">Wir lachen nicht über Fragen</li>
<li class="fragment">…und auch kein “mit den Augen rollen” bei Fragen.</li>
<li class="fragment">Wir machen keine Selbstbeweihräucherung unserer Person, Firma, oder unseres Jobs.</li>
</ul>
</section>
<section>
<ul>
<li>Wir machen uns weder über einzelne Personen, noch über Communities, und auch nicht über Technologien lustig.</li>
<li class="fragment">Wir <b>debattieren nicht</b> welche Programmiersprachen, Methoden, oder Technologien “besser” sind.</li>
<li class="fragment">Wir fassen ihre Tastatur nicht an.</li>
</ul>
</section>
<section>
<h3>Ihre Tastatur</h3>
<p><b>Sie besteht aus <span style="color: red">Lava!</span></b>
<ul>
<li class="fragment">Fass sie nicht an!</li>
<li class="fragment">Falls Du in einer (sehr unwahrscheinlichen) ausweglosen Situation bist, und etwas auf ihrem Computer machen <i>musst</i>, frage sie vor
</ul>
</section>
<section data-background="#286d99">
<h3><b>Danke</b></h3>
<p>dass Du hilfst den Spaß am Programmieren weiter zu verbreiten!</p>
</section>
</section>
<section>
<section>
<h2>Learning Materials</h2>
<a href="//cssclass.es/materials/">cssclass.es/materials/</a>
</section>
<section>
<h3>Halte es einfach</h3>
<ul>
<li class="fragment">Verwirre Leute nicht mit komplizierten Dingen (SCSS, CSS Modules etc.)</li>
<li class="fragment">Auch, wenn du eine bessere Lösung kennst, lass Lernende erst mal machen.</li>
</ul>
</section>
<section>
<h3>Apps</h3>
<ul>
<li class="fragment">Browser: Chrome oder Firefox</li>
<li class="fragment">Editor: Sublime Text oder Atom</li>
</ul>
</section>
<section>
<h3>Verbesserungen?</h3>
<ul>
<li class="fragment">Komm uns auf zu und sage, was besser sein könnte</li>
<li class="fragment">Erstelle auf Github ein Issue</li>
<li class="fragment">Erstelle einen Pull Request mit deiner Verbesserung</li>
</ul>
</section>
</section>
<section>
<h2>Slack</h2>
<ul>
<li class="fragment"><a href="//bit.ly/cssclasses">bit.ly/cssclasses</a></li>
<li class="fragment">#hamburg-germany</li>
</ul>
</section>
<section>
<h2>Schedule</h2>
<table class="schedule">
<tbody>
<tr>
<td>09:30-10:00</td>
<td>Installation Party (optional)</td>
</tr>
<tr>
<td>10:00-10:15</td>
<td>Welcome</td>
</tr>
<tr>
<td>10:15-12:00</td>
<td>Coding in groups</td>
</tr>
<tr>
<td>12:00-13:00</td>
<td>Lunch</td>
</tr>
<tr>
<td>13:00-16:00</td>
<td>Coding in groups</td>
</tr>
<tr>
<td>16:00-16:45</td>
<td>Demos</td>
</tr>
<tr>
<td>16:45-17:00</td>
<td>Wrap up</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Need help?</h2>
<p>
Please Tweet/DM us at <a href="https://twitter.com/CSSclassesHH">@CSSclassesHH</a> or<br>talk to us directly.
</p>
</section>
<section>
<h2>Happy Learning!</h2>
</section>
<section>
<h4>Learning Materials</h4>
<p>
<a href="//cssclass.es/materials/">cssclass.es/materials/</a>
</p>
<h4 style="margin-top:2em">Code of Conduct</h4>
<p>
<a href="//cssclass.es/code-of-conduct/">cssclass.es/code-of-conduct/</a>
</p>
<p style="margin-top:2em">#CSSclasses / <a href="https://twitter.com/CSSclassesHH">@CSSclassesHH</a></p>
</section>
</div>
</div>
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>