forked from milesmcc/cs106s
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
439 lines (423 loc) · 26.2 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
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
<!doctype html>
<html lang=en>
<head>
<title>CS106S: Coding for Social Good</title>
<meta charset=utf-8>
<meta http-equiv=x-ua-compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=description
content="CS 106S is a survey course on the applications of fundamental computer science concepts from CS 106B to problems in the social good space (such as health, government, education, and environment).">
<meta property="og:description"
content="CS 106S is a survey course on the applications of fundamental computer science concepts from CS 106B to problems in the social good space (such as health, government, education, and environment).">
<meta property="og:site_name" content="CS106S">
<meta property="og:type" content="website">
<meta property="og:title" content="CS106S: Coding for Social Good">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/a17t@latest/dist/a17t.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/a17t@latest/dist/tailwind.css">
<style>
:root {
--family-secondary: "Source Sans Pro", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--family-primary: var(--family-secondary);
--code-color: var(--color-neutral-800);
--code-background: var(--color-neutral-100);
--color-neutral-000: #ffffff;
--color-neutral-50: #f3f4f6;
--color-neutral-100: #e5e7eb;
--color-neutral-200: #d1d5db;
--color-neutral-300: #9ca3af;
--color-neutral-400: #6b7280;
--color-neutral-500: #4b5563;
--color-neutral-600: #374151;
--color-neutral-700: #1f2937;
--color-neutral-800: #172136;
--color-neutral-900: #0b0f18;
--color-critical-000: #fef2f2;
--color-critical-50: #fee2e2;
--color-critical-100: #fecaca;
--color-critical-200: #fca5a5;
--color-critical-300: #f87171;
--color-critical-400: #ef4444;
--color-critical-500: #dc2626;
--color-critical-600: #b91c1c;
--color-critical-700: #991b1b;
--color-critical-800: #7f1d1d;
--color-critical-900: #441313;
--color-warning-000: #fffbeb;
--color-warning-50: #fef3c7;
--color-warning-100: #fde68a;
--color-warning-200: #fcd34d;
--color-warning-300: #fbbf24;
--color-warning-400: #f59e0b;
--color-warning-500: #d97706;
--color-warning-600: #b45309;
--color-warning-700: #92400e;
--color-warning-800: #783900;
--color-warning-900: #411e01;
--color-positive-000: #f0fdf4;
--color-positive-50: #dcfce7;
--color-positive-100: #bbf7d0;
--color-positive-200: #86efac;
--color-positive-300: #4ade80;
--color-positive-400: #22c55e;
--color-positive-500: #16a34a;
--color-positive-600: #15803d;
--color-positive-700: #166534;
--color-positive-800: #14532d;
--color-positive-900: #0f2e1b;
--color-info-000: #eff6ff;
--color-info-50: #dbeafe;
--color-info-100: #bfdbfe;
--color-info-200: #93c5fd;
--color-info-300: #60a5fa;
--color-info-400: #3b82f6;
--color-info-500: #2563eb;
--color-info-600: #1d4ed8;
--color-info-700: #1e40af;
--color-info-800: #1e3a8a;
--color-info-900: #14244e;
--color-urge-000: #f5f3ff;
--color-urge-50: #ede9fe;
--color-urge-100: #ddd6fe;
--color-urge-200: #c4b5fd;
--color-urge-300: #a78bfa;
--color-urge-400: #8b5cf6;
--color-urge-500: #7c3aed;
--color-urge-600: #6d28d9;
--color-urge-700: #5b21b6;
--color-urge-800: #4c1d95;
--color-urge-900: #240e44;
}
@media (prefers-color-scheme: dark) {
:root {
--color-neutral-900: #ffffff;
--color-neutral-800: #f3f4f6;
--color-neutral-700: #e5e7eb;
--color-neutral-600: #d1d5db;
--color-neutral-500: #9ca3af;
--color-neutral-400: #6b7280;
--color-neutral-300: #4b5563;
--color-neutral-200: #374151;
--color-neutral-100: #1f2937;
--color-neutral-50: #172136;
--color-neutral-000: #0b0f18;
--color-critical-900: #fef2f2;
--color-critical-800: #fee2e2;
--color-critical-700: #fecaca;
--color-critical-600: #fca5a5;
--color-critical-500: #f87171;
--color-critical-400: #ef4444;
--color-critical-300: #dc2626;
--color-critical-200: #b91c1c;
--color-critical-100: #991b1b;
--color-critical-50: #7f1d1d;
--color-critical-000: #441313;
--color-warning-900: #fffbeb;
--color-warning-800: #fef3c7;
--color-warning-700: #fde68a;
--color-warning-600: #fcd34d;
--color-warning-500: #fbbf24;
--color-warning-400: #f59e0b;
--color-warning-300: #d97706;
--color-warning-200: #b45309;
--color-warning-100: #92400e;
--color-warning-50: #783900;
--color-warning-000: #411e01;
--color-positive-900: #f0fdf4;
--color-positive-800: #dcfce7;
--color-positive-700: #bbf7d0;
--color-positive-600: #86efac;
--color-positive-500: #4ade80;
--color-positive-400: #22c55e;
--color-positive-300: #16a34a;
--color-positive-200: #15803d;
--color-positive-100: #166534;
--color-positive-50: #14532d;
--color-positive-000: #0f2e1b;
--color-info-900: #eff6ff;
--color-info-800: #dbeafe;
--color-info-700: #bfdbfe;
--color-info-600: #93c5fd;
--color-info-500: #60a5fa;
--color-info-400: #3b82f6;
--color-info-300: #2563eb;
--color-info-200: #1d4ed8;
--color-info-100: #1e40af;
--color-info-50: #1e3a8a;
--color-info-000: #14244e;
--color-urge-900: #f5f3ff;
--color-urge-800: #ede9fe;
--color-urge-700: #ddd6fe;
--color-urge-600: #c4b5fd;
--color-urge-500: #a78bfa;
--color-urge-400: #8b5cf6;
--color-urge-300: #7c3aed;
--color-urge-200: #6d28d9;
--color-urge-100: #5b21b6;
--color-urge-50: #4c1d95;
--color-urge-000: #240e44;
}
}
</style>
</head>
<body class=bg-neutral-000>
<section class="max-w-6xl mx-auto p-4 relative min-h-screen">
<div class="md:flex md:justify-center md:mt-48 relative">
<aside class="md:sticky md:top-0 self-start md:pt-8">
<nav class="flex justify-between w-full items-center md:block mb-12 md:mb-0" aria-label=navigation>
<span class="flex justify-end md:w-full md:mb-12">
<img class="h-5 md:h-8" alt="The CS+Social Good logo"
src=images/logo.png>
</span>
<div
class="text-right md:-mt-1">
<div class=md:text-right>
<ul class="-ml-2 md:ml-0 flex md:block">
<li>
<div class="portal font-semibold ~warning text-warning-500">
<a href=#news />
<span>News</span>
</a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~positive text-positive-500">
<a href=#details />
<span>Details</span>
</a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~info text-info-500">
<a href=#instructors />
<span>Instructors</span>
</a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~urge text-urge-500">
<a href=#syllabus />
<span>Syllabus</span>
</a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~critical text-critical-500">
<a href=#ama />
<span>AMA Responses</span>
</a>
</div>
<br>
</li>
</ul>
</div>
</div>
</nav>
</aside>
<div class="md:min-w-xl md:max-w-xl md:mx-16 md:pt-6">
<section>
<div>
<h3 class="inline heading font-bold md:text-4xl">
CS106S
</h3>
<h3 class="inline heading font-bold md:text-4xl opacity-50">
<br>Coding for Social Good
</h3>
</div>
<div class=mt-4>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2">
Spring 2022
</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2">380-380F</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2">W 5:30p</span>
</div>
</section>
<hr class="sep h-8">
<main>
<section class=content>
<p>CS 106S is a survey course on the applications of fundamental computer science concepts from CS 106B to problems in the social good space (such as health, government, education, and environment). Each week consists of in-class activities designed by student groups, local tech companies, and nonprofits. Some of the topics we will cover include mental health chatbots, tumor classification with basic machine learning, sentiment analysis of tweets on refugees, and the ethical obligation of good security. Recommended prerequisite/corequisite: CS 106B.</p>
<h2 id="news">News</h2>
<div class="flex gap-5">
<div class="w-12">
<span class="chip ~neutral !low bg-neutral-50">03/26/22</span>
</div>
<div class="flex-grow">
<p>Welcome to CS106S! Our first class will be Wednesday March 30, 2022 at 5:30 P.M. PT in 380-380F.</p>
</div>
</div>
<h2 id="details">Course Details</h2>
<p>We're looking forward to a great quarter with you in CS106S! We know you are being equipped with the tools to make super cool stuff. However, sometimes it is difficult to see where these tools fit in the larger scheme of things. We want to show you ways to put the skills you have learned to good social use! Here are our objectives:</p>
<ul>
<li><strong>Awareness:</strong> For students to gain awareness about the applicability of technology and computer science to enact social good in the world.</li>
<li><strong>Exposure:</strong> For students to learn how to utilize their skills to build tools and projects that create positive social impact.</li>
<li><strong>Utilization:</strong> For students to gain exposure to the variety of current projects and efforts to use computer science for social good.</li>
</ul>
<p>Now, let's get into some important details: expectations, grading, and meeting time!</p>
<h4>Student Expectations</h4>
<p>Students are expected to attend class each week and participate in class lectures, discussions, and exercises. Every week will have a check-off form with some simple questions from class and feedback prompts for the teaching team; we leave time at the end of class for you to complete the check-off form (and we expect it to take no more than five minutes), and will close at 11:59pm the day of class. This will be the way we check your attendance.</p>
<h4>Grading</h4>
<p>Students will be graded on the basis of attendance and participation. Participation and attending a minimum of 8 out of 9 classes are requirements to receive credit. In the case that a student will miss more than one class due to extenuating circumstances, please contact the teaching staff to receive an excused absence (e.g., illness). If you miss class, please email us! We understand that life can be complicated, and can provide excused absences when necessary. We will always create a path for you to pass CS 106S — but we promise that the easiest way will be just to come to class.</p>
<h4>Meeting Time & Coursework</h4>
<p>CS106S will meet every Wednesday afternoon from 5:30p to 7:30p PT in 380-380F. Students will receive 1 unit of S/NC credit. Except in cases where students miss class (which we will handle on a case by case basis), no work will be required outside of our class meetings.</p>
<h4>Auditing</h4>
<p>We welcome auditors! Send an email to <strong>[email protected]</strong> to be added to the mailing list.</p>
<h4>Stanford Policies</h4>
<p>All students are expected to abide by Stanford’s Honor Code and to wear a mask if attending in-person.</p>
<h4>Students with Documented Disabilities</h4>
<p>Students who may need an academic accommodation based on the impact of a disability must initiate the request with the <a href="https://oae.stanford.edu/">Office of Accessible Education</a> (OAE). Professional staff will evaluate the request with required documentation, recommend reasonable accommodations, and prepare an Accommodation Letter for faculty dated in the current quarter in which the request is being made. Students should contact the OAE as soon as possible since timely notice is needed to coordinate accommodations. The OAE is located at 563 Salvatierra Walk (phone: 650-723-1066)</p>
<h2 id="instructors">Instructors</h2>
<div class="grid grid-cols-3 md:grid-cols-4 gap-6">
<div class="text-center">
<img src="images/miles_mccain.png" alt="Headshot of Miles McCain" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Miles McCain</p>
</div>
<div class="text-center">
<img src="images/matthew_early.jpg" alt="Headshot of Matthew Early" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Matthew Early</p>
</div>
<div class="text-center">
<img src="images/katie_creel.jpg" alt="Headshot of Dr. Katie Creel" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Dr. Katie Creel</p>
</div>
<div class="text-center">
<img src="images/default_user.jpg" alt="Placeholder image for Cooper" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Cooper De Nicola</p>
</div>
<div class="text-center">
<img src="images/nadin_turner.jpg" alt="Placeholder image for Nadin" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Nadin Tamer</p>
</div>
<div class="text-center">
<img src="images/default_user.jpg" alt="Placeholder image for Sarah" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Sarah Chen</p>
</div>
<div class="text-center">
<img src="images/default_user.jpg" alt="Placeholder image for Liza" class="rounded-full h-20 w-20 mx-auto">
<p class="font-semibold">Liza Goldberg</p>
</div>
</div>
<p>Questions? Contact us at <strong>[email protected]</strong>!</p>
<h2 id="syllabus">Syllabus</h2>
<p><i>Note: this syllabus is subject to change.</i></p>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 1</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Introduction to JavaScript</strong> — 3/30, Matthew</p>
<p>
<a href="https://docs.google.com/presentation/d/1Yo2RM1yhN5YNdTeXXHLrj-mIYHeQP9c6Gem1ASpEjE0/edit?usp=sharing" class="chip ~urge m-2 ml-0">Slides</a>
<a href="https://www.dropbox.com/sh/m6emgdvt1y84lv2/AAC0YlHMpPhEyCHQ0OBgX94Za?dl=0" class="chip ~info m-2 ml-0">Starter Code</a>
<a href="https://forms.gle/Rop4WWnAbDsKi4ZP6" class="chip ~critical m-2 ml-0">Checkoff Form</a>
<a href="https://drive.google.com/file/d/1jZ7PcRnP-luYT8VnFP-9t0tLaTx_ccLB/view?usp=sharing" class="chip ~positive m-2 ml-0">Solution</a>
</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 2</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Open Source Software</strong> — 4/6, Miles</p>
<p>
<a href="https://docs.google.com/presentation/d/10MjuZuI2OByz9fwIcpq1r4g7ABX0uMFan_q2AQmjbi8/edit?usp=sharing" class="chip ~urge m-2 ml-0">Slides</a>
<a href="https://forms.gle/ibr1n4kXhMxmT9WHA" class="chip ~critical m-2 ml-0">Checkoff Form</a>
</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 3</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Sentiment Analysis and Refugee Tweets</strong> — 4/13, Matthew</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 4</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>What is Social Good?</strong> — 4/20, Dr. Katie Creel</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 5</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Mental Health via ELIZA Chatbot</strong> — 5/4, Nadin</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 6</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>CS for Climate Change</strong> — 4/27, Liza</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 7</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Cancer Diagnosis with K-nearest Neighbors / Algorithmic Bias</strong> — 5/11, Sarah</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 8</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Ethical Hacking and Web Security</strong> — 5/18, Cooper</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 9</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>CS + Social Good Speaker Panel</strong> — 5/25, teaching staff</p>
</div>
</div>
<div class="grid grid-flow-row-dense gap-5 grid-cols-4 md:grid-cols-7">
<div>
<span class="chip ~neutral !low bg-neutral-50">Week 10</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>No class!</strong></p>
</div>
</div>
<h2 id="ama">AMA Responses</h2>
<p>Each week, we will give you an opportunity to ask us any questions you like about Stanford, CS, Social Good, Javascript, or whatever you like! Our responses will go here.</p>
<details>
<summary class="font-semibold cursor-pointer">How can I get involved with CS + Social Good?</summary>
<div class="content mt-2">
<p>The best way to get involved is to join our <a href="https://mailman.stanford.edu/mailman/listinfo/cs-for-social-good">mailing list</a>! We send out weekly newsletters with events and opportunities in the tech for social impact space. Everyone is welcome at our events and the email list is the best way to stay informed!</p>
</div>
</details>
</section>
</main>
<hr class="sep h-16">
<footer>
<footer class="family-secondary support content">
<p class=pb-2>
The source code for this website is <a href="https://github.com/milesmcc/cs106s">available on GitHub</a>, licensed under Apache 2.0. To learn more about CS + Social Gooooood, visit our website at <a href="https://cs4good.org">cs4good.org</a>.</p>
</p>
</footer>
</footer>
</div>
</div>
</section>
</body>
</html>