Skip to content

Commit 9063858

Browse files
parthsarinparthsarin
committed
Tabs work everything is garbage.
Why did we do it this way? WE could have picked a bajillion other website styles instead of this antiquated piece of human waste.
1 parent 2c7e2a8 commit 9063858

File tree

1 file changed

+263
-26
lines changed

1 file changed

+263
-26
lines changed

‎index.html‎

Lines changed: 263 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,11 @@
5252

5353
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
5454

55-
<link rel="stylesheet" href="css/bootswatch/paper.css">
55+
<!-- <link rel="stylesheet" href="css/bootswatch/paper.css"> -->
56+
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4/materia/bootstrap.min.css">
5657
<link rel="stylesheet" href="css/styles.css">
5758
<link rel="stylesheet" href="css/colors.css">
5859

59-
<script src="https://kit.fontawesome.com/5e5b1adc28.js" crossorigin="anonymous"></script>
60-
6160
</head>
6261
<body>
6362
<ul class="pages">
@@ -88,57 +87,295 @@ <h3 class="text-muted">the <span class="text-primary">python</span> programming
8887
<!-- Navigation Tabs -->
8988
<!-- End Course Info Tab -->
9089
<nav role="navigation">
91-
9290
<ul class="nav nav-tabs nav-fill" role="tablist">
9391
<li class="nav-item" role="presentation">
94-
<a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a>
92+
<a class="nav-link active" href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Overview</a>
9593
</li>
9694
<li class="nav-item">
97-
<a class="nav-link active" data-toggle="tab" href="#lecture" role="tab" aria-controls="lecture" aria-selected="false">Lecture</a>
95+
<a class="nav-link" data-toggle="tab" href="#lecture" role="tab" aria-controls="lecture" aria-selected="false">Lecture</a>
9896
</li>
99-
<li class="nav-item">
100-
<a class="nav-link active" data-toggle="tab" href="#lab" role="tab" aria-controls="lab" aria-selected="false">Lab</a>
97+
<li class="nav-item">
98+
<a class="nav-link" data-toggle="tab" href="#labs" role="tab" aria-controls="lab" aria-selected="false">Labs</a>
10199
</li>
102-
<li class="nav-item">
103-
<a class="nav-link active" data-toggle="tab" href="#assignments" role="tab" aria-controls="assignments" aria-selected="false">Assignments</a>
100+
<li class="nav-item">
101+
<a class="nav-link" data-toggle="tab" href="#assignments" role="tab" aria-controls="assignments" aria-selected="false">Assignments</a>
104102
</li>
105-
<li class="nav-item">
106-
<a class="nav-link active" data-toggle="tab" href="#resources" role="tab" aria-controls="resources" aria-selected="false">Resources</a>
103+
<li class="nav-item">
104+
<a class="nav-link" data-toggle="tab" href="#resources" role="tab" aria-controls="resources" aria-selected="false">Resources</a>
107105
</li>
108-
<li class="nav-item">
109-
<a class="nav-link active" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">Course Info</a>
106+
<li class="nav-item">
107+
<a class="nav-link" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="false">Course Info</a>
110108
</li>
111109

112110
</ul>
113111
</nav>
114112
<!-- End Navigation Tabs -->
115113

116114
<!-- Tab Panes -->
117-
118115
<div class="tab-content">
119-
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
116+
<!-- Overview Tab -->
117+
<div role="tabpanel" class="tab-pane fade show active" id="overview">
118+
119+
<!-- Start of the Final Project Showcase -->
120+
<h4 class="text-primary">Project Showcase</h4>
121+
<div class="container">
122+
<div id="final-showcase" class="row no-gutters justify-content-between d-flex flex-wrap">
123+
124+
</div>
125+
</div>
120126

121-
</div>
122-
<div class="tab-pane fade" id="lecture" role="tabpanel" aria-labelledby="lecture">
127+
<!-- End of the Final Project Showcase -->
123128

129+
<div class="row">
130+
<!-- Left Column -->
131+
<div class="col-md-4">
132+
<!-- Announcements -->
133+
<h4 class="text-primary">News Feed</h4>
134+
<div id="announcements">
135+
<!-- Announcements are inserted here by resources.js -->
136+
</div>
137+
<!-- End Announcements -->
138+
</div>
139+
<!-- End Left Column -->
124140

141+
<!-- Right Column -->
142+
<div class="col-md-8 col-ms-12">
143+
<h4 class="text-primary">Schedule</h4>
144+
<!-- Schedule -->
145+
<div class="schedule">
146+
<div class="table-responsive panel panel-default">
147+
<div class="panel-heading">Course Content</div>
148+
<table class="table table-striped table-hover table-bordered">
149+
<thead>
150+
<tr>
151+
<th style="width:20%">Topic</th>
152+
<th style="width:40%">Monday</th>
153+
<th style="width:40%">Wednesday</th>
154+
</tr>
155+
</thead>
156+
<tbody>
157+
<!-- Schedules are inserted here by resources.js -->
158+
</tbody>
159+
</table>
160+
</div>
161+
</div>
162+
<!-- End Schedule -->
163+
164+
</div>
165+
<!-- End Right Column -->
166+
</div>
125167
</div>
126-
<div class="tab-pane fade" id="lab" role="tabpanel" aria-labelledby="lab">
127-
168+
<!-- End Overview Tab -->
128169

170+
<!-- Lecture Tab -->
171+
<div role="tabpanel" class="tab-pane fade" id="lecture">
172+
<!-- Lectures -->
173+
<div class="lectures">
174+
<div class="table-responsive panel panel-default">
175+
<div class="panel-heading">Lecture Material</div>
176+
<div class="panel-body">
177+
<p class="blurb">Lectures are generally once per week, and are intended to fill the 80-minute class period. Each lecture covers a particular aspect of the Python language or ecosystem. Lectures build on each other - that is, the material gets progressively more advanced throughout the quarter. Slides are heavily animated, so both the compressed and full versions of the slide decks are uploaded.</p>
178+
<p class="blurb">Unfortunately, CS41 is not offered through SCPD, so the video recordings are not professionally done, and may at times be low-quality or missing entirely. Our goal is that the videos are a helpful learning resource, and hopefully they improve the CS41 experience for you!</p>
179+
<p class="blurb"><b>The video recordings are only viewable to those who have an SUNet ID (@stanford.edu email). Requests for access by external accounts will not be approved.</b> We will make exceptions on a case-by-case basis, especially to people who are university-affiliated. To apply for an exception, email coopermj@stanford.edu.</p>
180+
</div>
181+
<table class="table table-striped table-hover table-bordered">
182+
<thead>
183+
<tr>
184+
<th>Topic</th>
185+
<th>Slides</th>
186+
<th>Code</th>
187+
<th>Video</th>
188+
</tr>
189+
</thead>
190+
<tbody>
191+
<!-- Lectures are inserted here by resources.js -->
192+
</tbody>
193+
</table>
194+
</div>
195+
</div>
196+
<!-- End Lectures -->
129197
</div>
130-
<div class="tab-pane fade" id="assignments" role="tabpanel" aria-labelledby="assignments">
131-
198+
<!-- End Lecture Tab -->
132199

200+
<!-- Labs Tab -->
201+
<div role="tabpanel" class="tab-pane fade" id="labs">
202+
<div class="labs">
203+
<div class="table-responsive panel panel-default">
204+
<div class="panel-heading">Labs!</div>
205+
<div class="panel-body">
206+
<p class="blurb">Labs in CS41 provide a hands-on opportunity to experiment with the Python concepts presented in lectures. Although students work on these labs during an 80-minute class period, it would take much longer to fully complete a lab. Each lab comes with a number of challenge problems that will take even the experiences programmer nontrivial time. Labs are collaborative and open-ended, frequently asking you to think about how or why Python makes the decisions it does.</p>
207+
<p class="blurb">Each problem is chosen to reinforce a particular concept, but you are free to skip around at will. You are not expected to submit your solutions to labs, although our reference solutions will be posted afterwards. Think of labs as a chance to solidify your working knowledge of Python - after all, what better way to learn Python than to practice it?</p>
208+
<b class="blurb">See <a href="lab-assignments.html">Lab Assignments</a> for your lab assignment!</b>
209+
</div>
210+
<table class="table table-striped table-hover table-bordered">
211+
<thead>
212+
<tr>
213+
<th>Week</th>
214+
<th>Topic</th>
215+
<th>Part 1 Link</th>
216+
<th>Part 2 Link</th>
217+
<th>Solutions</th>
218+
</tr>
219+
</thead>
220+
<tbody>
221+
<!-- Labs are inserted here by resources.js -->
222+
</tbody>
223+
</table>
224+
</div>
225+
</div>
133226
</div>
134-
<div class="tab-pane fade" id="resources" role="tabpanel" aria-labelledby="resources">
135-
227+
<!-- End Labs Tab -->
136228

229+
<!-- Assignments Tab -->
230+
<div role="tabpanel" class="tab-pane fade" id="assignments">
231+
<div class="row">
232+
<div class="col-md-12">
233+
<div class="assignments">
234+
<div class="table-responsive panel panel-default">
235+
<div class="panel-heading">Assignments</div>
236+
<div class="panel-body">
237+
<p>Assignments in CS41 are a chance to show us what you've learned in the course! As a 2-unit CR/NC course, we don't want anyone to be unduly stressed about the assignments. Grades are given on the checkmark scale, and more importantly, submitted solutions will receive style feedback from the course staff. We think assignments are an opportunity to challenge yourself to really learn the material, so enjoy! We hope you have fun completing these assignments.</p>
238+
</div>
239+
<table class="table table-striped table-hover table-bordered">
240+
<thead>
241+
<tr>
242+
<th>#</th>
243+
<th>Title</th>
244+
<th>Handout</th>
245+
<th>Starter Code</th>
246+
<th>Released</th>
247+
<th>Due</th>
248+
</tr>
249+
</thead>
250+
<tbody>
251+
<!-- Assignments are inserted here by resources.js -->
252+
</tbody>
253+
</table>
254+
</div>
255+
</div>
256+
</div>
257+
</div>
137258
</div>
138-
<div class="tab-pane fade" id="info" role="tabpanel" aria-labelledby="info">
139-
259+
<!-- End Assignments Tab -->
140260

261+
<!-- Resources Tab -->
262+
<div role="tabpanel" class="tab-pane fade" id="resources">
263+
<div class="row">
264+
<div class="col-md-6">
265+
<div class="handouts">
266+
<div class="table-responsive panel panel-default">
267+
<div class="panel-heading">Handouts</div>
268+
<div class="panel-body">
269+
<p class="blurb">These handouts represent any miscellaneous information we need to communicate with you. Usually, these handouts contain logistical instructions, but anything goes!</p>
270+
</div>
271+
<table class="table table-striped table-hover table-bordered">
272+
<thead>
273+
<tr>
274+
<th>#</th>
275+
<th>Handout</th>
276+
</tr>
277+
</thead>
278+
<tbody>
279+
<!-- Handouts are inserted here by resources.js -->
280+
</tbody>
281+
</table>
282+
</div>
283+
</div>
284+
</div>
285+
<div class="col-md-6">
286+
<div class="readings">
287+
<div class="table-responsive panel panel-default">
288+
<div class="panel-heading">Readings</div>
289+
<div class="panel-body">
290+
<p>These optional reading materials are posted throughout the quarter to supplement the course material for those who are very interested in Python. You will not be held responsible for any information presented only through optional readings; however, the material is fascinating and worth looking at. Currently, it's just a list of articles I find interesting - there may be more structure in the future.</p>
291+
</div>
292+
<table class="table table-striped table-hover table-bordered">
293+
<thead>
294+
<tr>
295+
<th>#</th>
296+
<th>Reading</th>
297+
<th>Credit</th>
298+
</tr>
299+
</thead>
300+
<tbody>
301+
<!-- Readings are inserted here by resources.js -->
302+
</tbody>
303+
</table>
304+
</div>
305+
</div>
306+
</div>
307+
</div>
141308
</div>
309+
<!-- End Resources Tab -->
310+
311+
<!-- Course Info Tab -->
312+
<div role="tabpanel" class="tab-pane fade" id="info">
313+
<div class="row">
314+
<div class="col-md-12">
315+
<div class="well lead">
316+
The fundamentals and contemporary usage of the Python programming language. Primary focus on developing best practices in writing Python and exploring the extensible and unique parts of Python that make it such a powerful language.
317+
</div>
318+
319+
<h4>Essential Links</h4>
320+
<p class="lead">
321+
<!-- TODO: Fix this janky spacing hack -->
322+
<strong class="small"><a href="https://forms.gle/BNr58ergCR3bwp1U6" target="_blank">Mid-Quarter Evaluation</a></strong>
323+
324+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
325+
<strong class="small"><a href="https://docs.google.com/document/d/15Z1g1oXv32njCOiFvGBTlJde4rfOBtshBvKIQH17hys/edit?usp=sharing" onclick="gtag_trackOutboundLink('course_information'); return true;" target="_blank">Course Info</a></strong>
326+
327+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
328+
329+
<strong class="small"><a href="https://docs.google.com/document/d/1PcMPWTI8xiKbihE5FqJSFgVY2XMN0j6aoyIAsmwvd8U/edit?usp=sharing" onclick="gtag_trackOutboundLink('syllabus'); return true;" target="_blank">Syllabus</a></strong>
330+
331+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
332+
333+
<strong class="small"><a href="https://piazza.com/stanford/winter2020/cs41" onclick="gtag_trackOutboundLink('piazza'); return true;" target="_blank">Piazza</a></strong>
334+
</p>
335+
336+
<h4>Basic Info</h4>
337+
338+
<dl class="dl-horizontal lead">
339+
<dt>Date / Time</dt>
340+
<dd>Monday + Wednesday 3:00pm to 4:20pm</dd>
341+
342+
<dt>Location</dt>
343+
<dd>Gates B12</dd>
344+
345+
<dt>Instructors</dt>
346+
<dd>Parth (psarin@stanford.edu)</dd>
347+
<dd>Michael (coopermj@stanford.edu)</dd>
348+
349+
<dt>Course Staff</dt>
350+
<dd>Email: staff@stanfordpython.com</dd>
351+
<dd>Alexander Iyabor Jr</dd>
352+
<dd>Andrew Huang</dd>
353+
<dd>Antonio Ferris</dd>
354+
<dd>Joy Hsu</dd>
355+
<dd>Lemuel Cardenas-Arriaga</dd>
356+
<dd>Nick Negrete</dd>
357+
<dd>Sam Kwong</dd>
358+
<dd>Theo Culhane</dd>
359+
360+
<dt>Prereqs</dt>
361+
<dd>CS106B/X or equivalent</dd>
362+
363+
<dt>Spotify Playlist</dt>
364+
<dd><a href="https://open.spotify.com/playlist/1pn8cUoKsLlOfX7WEEARz4?si=jKogUQTsSDmqu6RbSBGfGA">🦄 CS 41</a> (contribute!)</dd>
365+
366+
</dl>
367+
<h4>Office Hours</h4>
368+
<dl class="dl-horizontal lead">
369+
<dt>Parth's</dt>
370+
<dd>Fridays, 3pm-4pm in Gates B02</dd>
371+
<dt>Michael's</dt>
372+
<dd>Tuesdays, 9:30am-10:30am in Gates B02</dd>
373+
</dl>
374+
</div>
375+
</div>
376+
</div>
377+
<!-- End Course Info Tab -->
378+
</div>
142379
<!-- End Tab Panes -->
143380
</div>
144381
</li>

0 commit comments

Comments
 (0)