-
Notifications
You must be signed in to change notification settings - Fork 40
Expand file tree
/
Copy pathindex.html
More file actions
371 lines (286 loc) · 26.1 KB
/
index.html
File metadata and controls
371 lines (286 loc) · 26.1 KB
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
<!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 at Stanford">
<link rel="shortcut icon" href="images/stanford-favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<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">
<link rel="stylesheet" href="style.css">
</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-12 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"><a href = "#main-page"><img class= "h-5 md:h-20" alt="Stanford logo"
src="images/logo.png"></a> <!-- class="h-5 md:h-8"-->
</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 ~positive text-critical-500">
<a href=#news><span>News</span></a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~urge text-info-500">
<a href=#schedule><span>Schedule</span></a>
</div>
<br>
</li>
<li>
<div class="portal font-semibold ~positive text-positive-500">
<a href="#syllabus"><span>Syllabus</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 id = "main-page">
<div>
<h3 class="inline heading font-bold md:text-4xl">
CS 106S
</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" style = "background-color: lavender">
🌸 Spring 2025
</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2" style = "background-color: lavender">🏫 Lathrop 180</span>
<span class="chip ~neutral !normal bg-neutral-100 mb-2 mr-2" style = "background-color: lavender">🕰️ Thursday 4:30-6:20pm</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, environment, cybersecurity, trust & safety). Some of the topics we will cover include satellite imagery, tumor classification with basic machine learning, sentiment analysis of tweets on refugees, and the ethical obligation of good security. We introduce JavaScript and the groundwork of web development, with no expectation of prior experience in these areas. The course ends, by tradition, with a bubble tea party on the last day. 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" style = "background-color: rgb(230, 230, 250)">03/29/25</span>
</div>
<div class="flex-grow">
<p style = "margin-bottom: 10px">Welcome to CS106S! Sooooo excited for a fun quarter together 🌱. Our first class will be Thursday, April 3rd 2025, at 4:30 PM PT in <a href="https://campus-map.stanford.edu/?srch=Lathrop Library" style = "text-decoration: none" target="_blank" rel="noopener noreferrer"> <i class = "fa-solid fa-location-dot"></i><u> Lathrop 180</u></a>.</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6336.673648795224!2d-122.17000072459861!3d37.42914707207451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb29c2155555%3A0x7d7db72ceea1d9ef!2sLathrop%20Library!5e0!3m2!1sen!2sjp!4v1743211766086!5m2!1sen!2sjp" width="300px" height="300px" style="border:0; border-radius: 10px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<p class="mt-2" style = "margin-top: 10px"><strong>We encourage all interested students to attend the first class, whether enrolled or otherwise!</strong> Historically, we have not had to turn students away from CS 106S for enrollment reasons. Looking forward to meeting and getting to know all of you!</p>
</div>
</div>
<h2 id="schedule">Schedule</h2>
<!-- Week 1 -->
<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" style = "background-color: lavender">Week 1</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Introduction, Ciphers, and JavaScript</strong> — Apr 3</p>
<p>
<a href = "slides/cs106s_spr25_week1.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://github.com/yanbenjamin/cs106s-w1" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="./handouts/js-tutorial.html" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">JS Guide</a>
<a href="#syllabus" class="chip ~positive m-2 ml-0">Syllabus</a>
<a href="https://forms.gle/45dxCtHe8ZnA3Kis7" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
<p>
<a href="https://github.com/yanbenjamin/cs106s-w1/blob/answers/assignment.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution</a>
<a href="https://github.com/yanbenjamin/cs106s-w1/blob/answers/assignment-extension.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution (Extensions)</a>
</p>
</div>
</div>
<!-- Week 2 -->
<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" style = "background-color: lavender">Week 2</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Sentiment Analysis and Refugee Tweets</strong> — Apr 10</p>
<p>
<a href = "slides/cs106s_spr25_week2.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://github.com/yanbenjamin/cs106s-sentiment" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="https://forms.gle/PvPDMebMz5sxXCA5A" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
<p>
<a href="https://github.com/yanbenjamin/cs106s-sentiment/blob/answers/sentiment-analysis.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution</a>
<a href="https://github.com/yanbenjamin/cs106s-sentiment/blob/answers/extensions.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution (Extensions)</a>
</p>
</div>
</div>
<!-- Week 3 -->
<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" style = "background-color: lavender">Week 3</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>CS for Climate Change</strong> — Apr 17</p>
<p>
<a href = "slides/cs106s_spr25_week3.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://github.com/yanbenjamin/CS106S-climatechange/" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="https://docs.google.com/document/d/1mfX2_ikebLgB9ep-BAzGiDjum2XKQxo5_HrznAbbxoY/edit?usp=sharing" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">GEE Setup</a>
<a href="https://forms.gle/WYpLy7PoGCKbrckD8" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
<a href="https://docs.google.com/document/d/1G00W2SIWIigw9MBiNU7Fkvu-2NwlG6q0ZzJlaARU5ic/edit?usp=sharing" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Gallery</a>
</p>
</div>
</div>
<!-- Week 4 -->
<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" style = "background-color: lavender">Week 4</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Cancer Detection with KNN</strong> — Apr 24</p>
<p>
<a href = "slides/cs106s_spr25_week4.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://github.com/yanbenjamin/CS106S-knn/" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="https://forms.gle/AQxbJ4NZfSspugoZ7" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
<p>
<a href="https://github.com/yanbenjamin/cs106s-knn/blob/answers-spr25/classify.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution</a>
<a href="https://github.com/yanbenjamin/cs106s-knn/blob/answers-spr25/extensions.js" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution (Extensions)</a>
</p>
</div>
</div>
<!-- Week 5 -->
<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" style = "background-color: lavender">Week 5</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Cybersecurity and Ethical Hacking</strong> — May 1</p>
<p>
<a href="slides/cs106s_spr25_week5.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://catshare.saligrama.io/" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Catshare</a>
<a href="https://forms.gle/Bk9HLMZ7MA9rNNTu6" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
</div>
</div>
<!-- Week 6 -->
<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" style = "background-color: lavender">Week 6</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Open Source & Web Software</strong> — May 8</p>
<p>
<a href="slides/cs106s_spr25_week6.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://github.com/yanbenjamin/cs106s-website" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="https://forms.gle/YVC4d1bZDoyXH23s8" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="chip ~positive m-2 ml-0" target="_blank" rel="noopener noreferrer">Solution</a>
</p>
</div>
</div>
<!-- Week 7 -->
<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" style = "background-color: lavender">Week 7</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Trust and Safety</strong> — May 15</p>
<p>
<a href="slides/cs106s_spr25_week7.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://forms.gle/cfrZ3x5yJdGJAAE76" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
</div>
</div>
<!-- Week 8 -->
<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" style = "background-color: lavender">Week 8</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>Mental Health</strong> — May 22</p>
<p>
<a href="slides/cs106s_spr25_week8.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://drive.google.com/file/d/1B60IGlphy5hEU3MS-6226Tr7elPDwcah/view?usp=sharing" class="chip ~info m-2 ml-0" target="_blank" rel="noopener noreferrer">Starter Code</a>
<a href="https://forms.gle/gPY5RCgE3SbZYgAN7" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
</div>
</div>
<!-- Week 9 -->
<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" style = "background-color: lavender">Week 9</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong> What's Next? Beyond CS106S, End-Term Boba Party 🧋</strong> — May 29</p>
<p>
<a href="slides/cs106s_spr25_week9.pdf" class="chip ~urge m-2 ml-0" target="_blank" rel="noopener noreferrer">Slides</a>
<a href="https://forms.gle/ubU1Kdn87NgRCnjH8" class="chip ~critical m-2 ml-0" target="_blank" rel="noopener noreferrer">Checkoff Form</a>
</p>
</div>
</div>
<!-- Week 10 (no class!) -->
<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" style = "background-color: lavender">Week 10</span>
</div>
<div class="col-span-3 md:col-span-6">
<p><strong>No class! Good luck on your finals! 🍀</strong>.</p>
</div>
</div>
<h2 id="syllabus">Course Syllabus</h2>
<p style = "margin-bottom: 5px"><b>Instructor: </b> Ben Yan </p>
<p style = "margin-top: 5px; margin-bottom: 5px"><b>Email:</b> bbyan [at] stanford [dot] edu</p>
<p style = "margin-top: 5px; margin-bottom: 5px"><b>Office Hours: </b> I'll be around after class, or email/Slack me and we can find a time! Happy to chat about course material, CS, Stanford life in general, anything!</p>
<p style = "margin-top: 5px; margin-bottom: 5px"><b>Faculty Sponsor:</b> Prof. Jerry Cain</p>
<h4>Summary</h4>
<p>🌲 CS106S is a <b>1-unit, S/NC course</b> that we run in a relaxed, workshop-style classroom environment. Each week, we'll provide active lecture content in a social good ecosystem (e.g., climate change, health, cybersecurity, trust and safety), opportunites for group discussion, and hands-on activities for you to practice your programming skills and build relevant applications. We will introduce JavaScript, and the basics of web development; no prior experience in these areas is needed or expected. Though please note this is not a dedicated web programming or web applications course, unlike courses such as CS 106AX 💙, CS 147L, CS 142, or CS 193X.</p>
<p>👋 The course is designed for students who are taking or who have taken CS106B—though this is not a strict requirement, and <b>anyone is welcome to attend</b>! Please feel free to talk to us on whether CS106S is the best option for you.</p>
<p>🧭 CS106S meets on <b>Thursdays, 4:30 - 6:20pm, in Lathrop 180.</b> Except in cases where students miss more than 2 classes (which I'm happy to discuss on a case by case basis, typically with a short, non-coding make-up assignment), no work will be required outside of our class meetings.</p>
<p>📬 If you have any questions, please feel free to email me at <a href = "mailto:bbyan@stanford.edu" style = "text-decoration: bold; color: black">bbyan@stanford.edu</a>!</p>
<h4>Requirements and Grading</h4>
<p><b>Grading is based on attendance and participation,</b>: to receive credit, students must attend a minimum of 7 out of the 9 weekly classes. If you have to miss more than 2 classes due to extenuating circumstances (e.g., illness, personal crisis, need time to take care of yourself and your well-being, etc.), please reach out to receive an excused absence. You won't have to elaborate; I trust you. If you miss class, please email me as well! Our guiding principles are (1) we understand life can be very stressful and challenging, and so (2) <b>we will always create a path for you to pass the class.</b></p>
<h4>Attendance</h4>
<p>To check attendance, each class will have a brief check-off form. It contains some quick questions from class and feedback prompts. I expect it to take no more than 5 minutes, and time is alloted at the end of class to complete it—though for flexibility, the form will kept open until 11:59 PM PT the class day.</p>
<h4>Stanford Policies</h4>
<p>All students are expected to abide by Stanford's Honor Code.</p>
<h4>Accommodations</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>
<h4 id="faq">FAQ</h4>
<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 contact <a href = "mailto:stanfordcs4good@gmail.com">stanfordcs4good@gmail.com</a>, or to join our <a href="https://mailman.stanford.edu/mailman/listinfo/cs-for-social-good" target="_blank" rel="noopener noreferrer">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> <br>
</details>
<h4>Looking Forward to an Amazing Quarter</h4>
<p style = "margin-bottom: 0px">Teaching this 1-unit wonder has been a truly wonderful privilege and joy for me, <s>because of all the free boba over the years</s>. Thank you for being here to learn with us, and I hope this will be very fun for you! 🌱🌱🌱</p>
</section>
</main>
<hr class="sep h-16">
<footer>
<footer class="family-secondary support content">
<p class=pb-2 style = "font-size:12px">
© Stanford 2025. Created by Ben Yan and <a href = "https://cs4good.com/">CS + Social Good</a>. Template by Miles McCain. The source code for this website is <a href="https://github.com/yanbenjamin/cs106s-website">available on GitHub</a>. To learn more about CS + Social Good, visit our website at <a href="https://cs4good.com">cs4good.com</a>.
</p>
</footer>
</footer>
</div>
</div>
</section>
</body>
</html>