forked from ehermann/codeclub-world
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
368 lines (301 loc) · 13.3 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
---
layout: default
title: Home
---
<div class="row">
<div class="twelve columns"><hr></div>
</div>
<div class="row introduction">
<div class="seven columns">
<h2>Our mission</h2>
<p><b>The mission of CodeClubWorld.org</b> is to give every child in the world the chance to learn to code by providing project materials and a volunteering framework that supports the running of after-school coding clubs.</p>
</div>
<div class="five columns">
<h2>Support us</h2>
<p>We need your support to help grow Code Club World.</p>
<p><a href="/support-us" class="button primary round">Support us</a></p>
</div>
</div>
<div class="row">
<div class="twelve columns"><hr></div>
</div>
<div class="row how-it-works">
<div class="twelve columns">
<div class="row">
<div class="ten columns">
<h2>How to create a club</h2>
<p>We create projects for our volunteers to teach at after school coding clubs. The projects we make teach children how to program by showing them how to make computer games, animations and websites. Volunteers go to their local junior school or other venue, such as a library, for an hour a week and teach one project a week. Check out the languages below and register your club.</p>
</div>
</div>
<div class="row">
<div class="bit">
<div class="image">
<img src="/img/club-steps/1.png">
</div>
<h4>Volunteer</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/club-steps/2.png">
</div>
<h4>Projects</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/club-steps/3.png">
</div>
<h4>Venue</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/club-steps/4.png">
</div>
<h4>Children</h4>
</div>
<div class="bit">
<img src="/img/logo-150x150.png">
<p><a href="/advice/creating-a-club.html" class="button secondary round">Find out more</a></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns"><hr></div>
</div>
<div class="row how-it-works community-steps">
<div class="twelve columns">
<div class="row">
<div class="ten columns">
<h2>How to create a community in your country</h2>
<p>Code Club World is community led and supported. This means that the projects will need to be translated by each country and the volunteers need to be supported by a central team in each country. This sounds like a big task but we’ll help you with is as much as we can. Find out more about how to set up a successful community.</p>
</div>
</div>
<div class="row">
<div class="bit">
<div class="image">
<img src="/img/community-steps/1.png">
</div>
<h4>Take our projects</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/community-steps/2.png">
</div>
<h4>translate them into your language.</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/community-steps/3.png">
</div>
<h4>Support your volunteers</h4>
</div>
<div class="bit">
<div class="image">
<img src="/img/community-steps/4.png">
</div>
<h4>by using social media and holding meet ups</h4>
</div>
<div class="bit last">
<a href="/advice/creating-a-community.html" class="button secondary round">Get started now</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns"><hr></div>
</div>
<div class="row">
<div class="twelve columns">
<div class="white panel map-wrapper">
<div class="row">
<div class="ten columns club-count">
<h2><span class="counter"></span> <span class="counter-after">Code Clubs worldwide!</span></h2>
</div>
<div class="two columns start-club">
<a class="button primary round">Start Club</a>
</div>
</div>
<div id="map"></div>
</div>
<div class="panel" id="register">
<form novalidate>
<div class="row">
<div class="twelve columns">
<h3>Register your Code Club and join the movement!</h3>
</div>
</div>
<div class="row">
<div class="nine columns">
<div class="row">
<div class="six columns">
<div class="custom-placeholder required">
<label for="venue[name]">Venue name</label>
<input class="medium input-text" name="venue[name]" id="venue[name]" type="text" data-trigger="change" required="required">
</div>
<div class="custom-placeholder">
<label>Venue website</label>
<input class="medium input-text" type="text" name="venue[website]" data-trigger="change">
</div>
<p>The venue website will be shown on the map marker</p>
<br class="separator">
<div class="custom-placeholder required">
<label for="venue[address_1]">Venue address 1</label>
<input class="medium input-text" name="venue[address_1]" id="venue[address_1]" type="text" data-trigger="change" required="required">
</div>
<div class="custom-placeholder">
<label for="venue[address_2]">Venue address 2</label>
<input class="medium input-text" name="venue[address_2]" id="venue[address_2]" type="text">
</div>
<div class="custom-placeholder">
<label for="venue[region]">Venue region</label>
<input class="medium input-text" name="venue[region]" id="venue[region]" type="text">
</div>
<div class="custom-placeholder">
<label for="venue[city]">Venue city</label>
<input class="medium input-text" name="venue[city]" id="venue[city]" type="text">
</div>
<div class="custom-placeholder">
<label for="venue[postcode]">Venue postcode</label>
<input class="medium input-text" type="text" name="venue[postcode]" id="venue[postcode]" data-trigger="change">
</div>
<p>The venue address will NOT be shown on the map marker and is just used to place the venue on the map.</p>
<br class="separator">
<div class="custom-placeholder required">
<label>Country</label>
{% include country_select.html %}
</div>
</div>
<div class="six columns">
<div class="custom-placeholder required">
<label for="contact[name]">Your name</label>
<input class="medium input-text" type="text" name="contact[name]" id="contact[name]" data-trigger="change" required="required">
</div>
<div class="custom-placeholder required">
<label for="contact[email]">Your email address</label>
<input class="medium input-text input-email" type="email" name="contact[email]" id="contact[email]" data-trigger="change" required="required">
</div>
<p class="mini-notice">Your name and email address will not be displayed</p>
<div class="custom-placeholder">
<label for="contact[skype]">Club skype name</label>
<input class="medium input-text" type="text" name="contact[skype]" id="contact[skype]">
</div>
<p>Set up a club Skype name so you can chat to other clubs. It will be displayed on your map marker</p>
<label id="terms-and-conditions">
<input type="checkbox" name="contact[agreed]" value="1" required="required" data-error-message="You must agree to the terms and conditions to continue.">
<strong>I have read and agreed to the <a href="http://codeclub-assets.s3.amazonaws.com/public/CodeClubWorld-Terms-of-Service-v1-clean.pdf">terms and conditions</a></strong>
</label>
<button type="submit" class="button primary round" id="create-a-club">Create a club</button>
</div>
</div>
</div>
<div class="three columns">
<p><strong>Why register?</strong></p>
<p>When you register your club you can download the certificates, door sign and badge templates to make your club complete.</p>
<img src="/img/robots/giddy.png" class="giddy" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row">
<div class="seven columns">
<h2>Teaching materials</h2>
<p>We write a new set of projects every school term. Each term the students will progress and learn more whilst at the same time using their imaginations and making creative projects. Terms 1 & 2 will use Scratch to teach the basics of programming. Term 3 will teach the basics of web development using HTML and CSS. Term 4 will teach Python and so on. We'll put these materials on GitHub for you to translate and share.</p>
<br>
<p>Code Club World will provide all of the Code Club materials in plaintext form - and we need you to use Github and translate them into your own language. Work together on this and it will be done in no time at all. You'll notice that the materials have not been designed, they are just in markdown. If you want your country's materials designed you'll need to find a designer to do this for you.</p>
</div>
</div>
<div class="boxes row materials">
<div class="three columns morepanel">
<div class="wrap">
<h4>Brazilian Portuguese</h4>
<a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-pt-BR.zip">Materials in Brazilian Portuguese</a>
<p class="links">
<b>Brazilian Code Club Websites</b><br>
<a href="http://www.codeclubbrasil.org">Code Club in Brazil</a>
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Catalan</h4>
<a class="button secondary round" href="https://github.com/CodeClub/scratch-curriculum/tree/master/ca-ES">Materials in Catalan</a>
<p class="links">
<b>Catalan Code Club Websites</b><br>
<a href="http://codeclubcat.org/">Code Club Catalan</a>
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Dutch</h4>
<a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-nl-NL.zip">Materials in Dutch</a>
<p class="links">
<b>Dutch Code Club Websites</b><br>
<a href="http://codeclub-nederland.nl/">Code Club Nederland</a>
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>English</h4>
<a class="button secondary round" href="http://projects.codeclubworld.org/en-GB/">Materials in English</a>
<p class="links">
<b>English Code Club Websites</b><br>
<a href="http://www.codeclub.org.uk">Code Club in the UK</a>
<a href="http://www.codeclubhk.org">Code Club in Hong Kong</a>
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>German</h4>
<a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-de-DE.zip">Materials in German</a>
<p class="links">
<b>German Code Club Websites</b><br>
No websites have been made yet
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Norwegian</h4>
<a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-bn-NO.zip">Materials in Norwegian</a>
<p class="links">
<b>Norwegian Code Club Websites</b><br>
<a href="http://kodeklubben.no/">Code Club in Norway</a>
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Spanish</h4>
<a class="button secondary round" href=https://github.com/CodeClub/scratch-curriculum/tree/master/es-ES/Trimestre%201>Materials in Spanish</a>
<p class="links">
<b>Spanish Code Club Websites</b><br>
No websites have been made yet
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Ukranian</h4>
<a class="button secondary round" href="http://codeclub-resources.s3.amazonaws.com/codeclub-term-1-scratch-uk-UA.zip">Materials in Ukranian</a>
<p class="links">
<b>Ukranian Code Club Websites</b><br>
No websites have been made yet
</p>
</div>
</div>
<div class="three columns morepanel">
<div class="wrap">
<h4>Missing projects in your language?</h4>
<div class="links">
<p>If you can't see projects translated into your language then that means they still need to be done.</p>
<p>Can you translate from English to your language?</p>
</div>
<a class="button secondary round" href="https://github.com/CodeClub/scratch-curriculum/blob/master/CONTRIBUTING.md">Get started now</a>
</div>
</div>
</div>