-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
283 lines (255 loc) · 18.6 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
<!doctype html>
<html lang="en-us">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Spandan Workshops - Unstructured Studio</title>
<meta name="description" content="">
<!-- The compiled CSS file -->
<link rel="stylesheet" href="css/production.css">
<!-- Web fonts -->
<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700" rel="stylesheet">
<!-- favicon.ico. Place these in the root directory. -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Font Awesome-->
<script src="https://kit.fontawesome.com/31612ddebf.js" crossorigin="anonymous"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-60027950-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-60027950-2');
</script>
</head>
<body class="has-animations">
<!-- Create outer border -->
<div class="page-border">
<div class="bg--white">
<!-- Header -->
<header class="align--center pt3 pb2">
<div class="container">
<h1 class="mb3 reveal-on-scroll is-revealing" title="Spandan Workshops"
style="font-size: 4em; font-weight: lighter; padding: 0.5em;"> <i class="fas fa-heartbeat"></i>spandan </h1>
<h2 class="mb3 reveal-on-scroll is-revealing">Free, online, hands-on creative workshops for middle and high-school students</h2>
<p class="mb1">March 28 - April 28, 2020</p>
<p><i class="fas fa-globe-africa"></i> Online, via the <a href="https://unhangout.media.mit.edu/" target="_blank">Unhangout Platform</a></p>
</div>
</header>
<!-- Body -->
<main>
<div class="container">
<!-- Info -->
<section class="pt2 pb3">
<div class="grid-row" style="margin-left: auto; margin-right: auto; width: 50%;">
<img class="mb3 header-img" src="img/kids.png" alt="Kids">
</div>
<p class="mb3">Does your child love creating, building, and learning new things? As a parent, you are wondering how your child can make the most use of this out of school time when all the schools and after-school programs are shutting down temporarily in your city?
For families with kids in middle and high school, please encourage them to sign-up for a series of free, online, and hands-on workshops focused on fun and creative topics such as app development, sketching, coding with Scratch, electronics, building robots, etc.
These workshops will be led by facilitators who work in the tech industry and hold a broad range of skill sets. The workshops are multilingual (in Korean, Bengali, English, Hindi, etc.) and the speakers might be able to accommodate the diverse language needs of students.
</p>
</section>
<!-- Sessions -->
<section class="pt2 pb1">
<h2 class="mb1">Workshops</h2>
<div class="grid-row">
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-pencil-alt"></i></i></h2>
<h3>1. Introduction to Character Designing</h3>
<blockquote class="blockquote">
<p>This course is designed for newbies, so you'll easily learn all tips and hacks for sketching cartoons.
It will cover how to work with lines, and basic shapes to create interesting personalities and tell stories.
</p>
<img class="mb1" src="img/character_sketches.png" style="max-height: 250px;" alt="Character sketches">
<br>
<p>Facilitator: <cite>Anna</cite></p>
<p>Language: <cite>English</cite></p>
<p>Grades: <cite>5-8</cite></p>
<p>Requirements: <cite>Pencil and white paper</cite></p>
<p>Date & Time: <cite>March 29th & April 5th, 4 pm Coordinated Universal Time (UTC)</cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-mobile-alt"></i></h2>
<h3>2. Building Mobile Apps with MIT App Inventor</h3>
<blockquote class="blockquote">
<p>This workshop will introduce students to the <a href="https://appinventor.mit.edu/" target="_blank">MIT App Inventor</a> and will engage
them in designing mobile apps using the tool.
</p>
<img class="mb1" src="img/app_inventor.png" style="max-height: 250px; " alt="App Inventor Image">
<br>
<p>Facilitator: <cite>Srishti Sethi</cite></p>
<p>Language: <cite>English/Hindi</cite></p>
<p>Grades: <cite>5-12</cite></p>
<p>Requirements: <cite>A computer, an android device (optional), internet and a Google Account</cite></p>
<p>Date & Time: <cite>April 11th, 4 pm & April 19th, 2:30 pm Coordinated Universal Time (UTC) </cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-robot"></i></h2>
<h3>3. Introduction to Robotic Programming Concepts</h3>
<blockquote class="blockquote">
<p>In this workshop, students will learn about basic robot programming concepts and build skills in algebra,
geometry, mental math, and spatial reasoning by working through fun robot puzzles.</p>
<img class="mb1" src="img/robot_coding.jpg" style="max-height: 250px;" alt="iRobot">
<br>
<p>Facilitator: <cite>Daniel Fitzgerald</cite></p>
<p>Language: <cite>English</cite></p>
<p>Grades: <cite>5-8</cite></p>
<p>Requirements: <cite>Computer with internet</cite></p>
<p>Date & Time: <cite>April 12th, 4 pm Coordinated Universal Time (UTC)</cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-car-battery"></i></h2>
<h3>4. Designing Circuits with TinkerCad</h3>
<blockquote class="blockquote">
<p>Learn how to build basic circuits (series/parallel) using simulated components in <a href="https://www.tinkercad.com/circuits" target="_blank">TinkerCad</a>.
Also learn how to program an Arduino to control a motor using block-based programming.</p>
<img class="mb1" src="img/tinkercad.png" style="max-height: 250px;" alt="Tinkercad Image">
<br>
<p>Facilitator: <cite>Suchakra Sharma</cite></p>
<p>Language: <cite>English</cite></p>
<p>Grades: <cite>8-10</cite></p>
<p>Requirements: <cite>Computer with internet</cite></p>
<p>Date & Time: <cite>April 18th, 3:00 pm Coordinated Universal Time (UTC)</cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-camera-retro"></i></h2>
<h3>5. Making Hybrid Images using Python</h3>
<blockquote class="blockquote">
<p>In this workshop, we will create hybrid images that exhibit an optical illusion of seeing two different images, depending on the viewing distance. We will learn to do so with Python programming.
</p>
<img class="mb1" src="img/optical_illusion.jpg" style="max-height: 250px;" alt="hybrid image">
<br>
<p>Facilitator: <cite>Hayley Song</cite></p>
<p>Language: <cite>English/Korean</cite></p>
<p>Grades: <cite>6-12</cite></p>
<p>Requirements: <cite>Two (similar) pictures (eg. pictures taken at the same location but different times, images of your portrait and your dad's). Computer with Python installed.</cite></p>
<p>Date & Time: <cite>April 25th, 4:00 pm Coordinated Universal Time (UTC)</cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
<div class="grid-column span-half mt1 reveal-on-scroll is-revealing">
<h2><i class="fas fa-cat"></i></h2>
<h3>6. Programming with Scratch</h3>
<blockquote class="blockquote">
<p>In this workshop, students will get introduced to the <a href="https://scratch.mit.edu/" target="_blank">Scratch programming environment</a> and learn how to develop stories,
games & animations using the tool.
</p>
<img class="mb1" src="img/scratch.png" style="max-height: 250px;" alt="Scratch">
<br>
<p>Facilitator: <cite>Srishti Sethi & Suchakra Sharma</cite></p>
<p>Language: <cite>English</cite></p>
<p>Grades: <cite>5-12</cite></p>
<p>Requirements: <cite>Computer and internet</cite></p>
<p>Date & Time: <cite>April 26th, 4:00 pm Coordinated Universal Time (UTC)</cite></p>
<!-- <p>Time: <cite>TBD</cite></p>-->
<br>
</blockquote>
</div>
</div>
<!-- <p style="padding-top: 2em;"><a href="" class="btn btn--outline reveal-on-scroll is-revealing">Download Schedule</a></p> -->
</section>
<!-- Sign-up -->
<section class="pt2 pb3">
<h2 class="mb1">Sign-Up</h2>
<p class="mb3"><b>Registration for Spandan Workshops for Round 1 is now closed. </b>We might plan a Round 2 sometime later in the year. If you are interested in attending our future workshops, sign-up below to receive updates about Spandan Workshops Round 2!
</p>
<p class="h3 mb2 reveal-on-scroll is-revealing">Click the button below to sign-up!</p>
<a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSf5QBlZLz-KIJSv7ofbS2mIVpxREQ8iWGxOE_iA1GzSpnEkcQ/viewform" class="btn btn--default reveal-on-scroll is-revealing">Student Sign-up →</a>
</section>
<!-- Facilitator -->
<section class="pt3 pb3">
<h2 class="mb1">Facilitators</h2>
<div class="grid-row">
<div class="grid-column span-one-third mt1">
<blockquote class="blockquote">
<img class="mb1" src="img/anna_c.jpeg" style="max-height: 200px;" alt="Anna">
<h3 class="fac-name"><cite>Anna Chakravorty</cite></h3>
<p>
Anna Chakravorty is a graphic artist and a UX designer based out of Edmonton, Canada. She is an instructor at the University of Alberta.
</p>
<br>
<p><i class="fas fa-globe"></i> <a target="_blank" href="http://annachakravorty.com"> Website</a></p>
<p><i class="fab fa-twitter"></i> <a href="https://twitter.com/annachakravorty" target="_blank"> Twitter</a></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1">
<blockquote class="blockquote">
<img class="mb1" src="img/daniel_f.png" style="max-height: 200px;" alt="Dan">
<h3 class="fac-name"><cite>Daniel Fitzgerald</cite></h3>
<p>
Daniel is a software engineer at iRobot, makers of the Roomba robot vacuum. He enjoys projects that combine hardware, software, and electronics.
</p>
<br>
<p><i class="fab fa-github"></i> <a target="_blank" href="https://github.com/danfitz7"> Website</a></p>
<p><i class="fab fa-twitter"></i> <a href="https://twitter.com/DanFitz_7" target="_blank"> Twitter</a></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1">
<blockquote class="blockquote">
<img class="mb1" src="https://blog.linuxplumbersconf.org/2017/ocw/system/photos/5126/profile/suchakra_bw_small.jpg" style="max-height: 200px;" alt="Suchakra">
<h3 class="fac-name"><cite>Suchakra Sharma</cite></h3>
<p>
Suchakra is a computer scientist and a designer based out of Toronto, Canada. He likes to tinker around with code and circuits.
</p>
<br>
<p><i class="fas fa-globe"></i> <a href="http://suchakra.in" target="_blank"> Website</a></p>
<p><i class="fab fa-twitter"></i> <a href="https://twitter.com/tuxology" target="_blank">Twitter</a></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1">
<blockquote class="blockquote">
<img class="mb1" src="img/srishti_s.jpg" style="max-height: 200px;" alt="Srishti">
<h3 class="fac-name"><cite>Srishti Sethi</cite></h3>
<p>
Srishti is a Developer Advocate based out of Oakland, California. She likes to code, develop educational tools and programs.
</p>
<br>
<p><i class="fas fa-globe"></i> <a href="http://srishtisethi.com" target="_blank"> Website</a></p>
<p><i class="fab fa-twitter"></i> <a href="https://twitter.com/Srish_Aka_Tux" target="_blank"> Twitter</a></p>
</blockquote>
</div>
<div class="grid-column span-one-third mt1">
<blockquote class="blockquote">
<img class="mb1" src="img/hayley_s.jpg" style="max-height: 200px;" alt="Hayley">
<h3 class="fac-name"><cite>Hayley Song</cite></h3>
<p>
Hayley is a PhD student studying AI for knowledge discovery in Los Angeles, USA. She likes to sketch, color-code and write to think and communicate better. </p>
<br>
<p><i class="fas fa-globe"></i> <a href="https://cocoaaa.github.io/" target="_blank"> Website</a></p>
</blockquote>
</div>
</div>
</section>
<!-- Sign-up -->
<section class="pt2 pb3">
<h2 class="mb1">Contact</h2>
<p class="mb3">You can learn more about us at <a href="https://unstructured.studio" class="link">unstructured.studio</a>. You can also contact us at: [email protected]. <br/> If you are an educator figuring out how you can take your classes online during this time, we will be happy to brainstorm with you the best ways to do so! <br/> If you are willing to help conduct or facilitate more of these workshops, please fill out the form below.
</p>
<!-- <p class="h3 mb2 reveal-on-scroll is-revealing">Click the link/button below to sign-up!</p> -->
<a target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSdJQftWFNW0co25t1ymdl2oM4-l3ogxvL39Uswr_3guMEDdEw/viewform" class="btn btn--outline reveal-on-scroll is-revealing">Facilitator Sign-up →</a>
</section>
</div>
</main>
</div>
</div>
<!-- Scroll reveal -->
<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
<!-- The compiled JavaScript file -->
<script src="js/production.js"></script>
</body>
</html>