-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
711 lines (704 loc) · 32.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
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
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web Design DeCal</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="A 2 unit course in UC Berkeley for anyone who wants to create a beautiful website." />
<meta property="og:title" content="Web Design DeCal" />
<meta property="og:url" content="https://www.webdesigndecal.github.io/" />
<meta property="og:image" content="https://www.webdesigndecal.github.io/static/thumbnails/logo.png" />
<meta property="og:description" content="A 2 unit course in UC Berkeley for anyone who wants to create a beautiful website." />
<meta property="og:site_name" content="Web Design DeCal" />
<meta name="twitter:title" content="Web Design DeCal">
<meta name="twitter:description" content="A 2 unit course in UC Berkeley for anyone who wants to create a beautiful website.">
<meta name="twitter:image" content="https://www.webdesigndecal.github.io/static/thumbnails/logo.png">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="static/icons/favicon.ico"/>
<!-- This should come before any load-blocking script and link:style tags -->
<!--script type="text/javascript">
if (window.innerWidth < 960) {
window.location.href = '/mobile/';
}
</!script--->
<link rel="stylesheet" type="text/css" href="static/css/promotional.css" %}" />
<script type="text/javascript" src="static/js/vendor/jquery-1.8.3.min.js" %}" charset="utf-8"></script>
<script type="text/javascript" src="static/js/vendor/jquery-ui-1.9.2.min.js" %}" charset="utf-8"></script>
<script type="text/javascript" src="static/js/vendor/waypoints.min.js" %}"></script>
<script type="text/javascript" src="static/js/vendor/masonry.pkgd.min.js" %}"></script>
<script type="text/javascript" src="static/js/promotional.js" %}" charset="utf-8"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52393347-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body data-page="cover" data-window="front" data-front="cover" data-back="about">
<div id="viewport" class="viewport-cover">
<div id="banner"><p id="banner-text"><!-- populated via js --></p><button id="banner-btn">Got it!</button></div>
<div class="content">
<div id="cover">
<div id="cover-header">
<div id="cover-overlay"></div>
<div id="cover-content">
<div id="cover-heading">Web Design DeCal</div>
<div id="cover-subheading">A 2-unit course for anyone who wants to create a <strong>beautiful</strong> website.</div>
<div id="cover-action">
<span id="cover-action-button"><!-- red cta button added via js --></span>
<a id="learn-more" class="cover-action-item">Learn More</a>
<div class="clear"></div>
</div>
</div>
</div>
<!--div resize="popUp(window.innerWidth)" class="popup" id="mobile-popup">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</!--div--->
<div id="cover-footer">
<div class="slide-overlay"></div>
</div>
</div>
<div id="about" class="slide">
<div class="slide-overlay"></div>
</div>
<div id="curriculum" class="slide">
<div class="slide-overlay"></div>
</div>
<div id="schedule">
<div id="schedule-wrapper">
<div class="schedule-item" data-week="1">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 1</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Introduction to Web Design</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">HTML & the Structure of Websites</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="2">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 2</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Visual Hierarchy & Spacing</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">CSS Selectors & Visual Rules</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="3">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 3</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Typography</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">CSS Box Model / Intro to Layouts</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="4">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 4</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Color Theory</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">CSS Display & Positioning</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="5">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 5</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Grids & Columns, Images & Layouts</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">CSS Flexbox</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="6">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 6</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Responsive Design</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">Responsive Layouts</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="7">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 7</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Motion, Flow & Aesthetics</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">CSS Animations</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="8">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 8</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Intro to HCD</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">Intro to JavaScript</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="9">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 9</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Dark Design</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">JavaScript .getElementById</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="10">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 10</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Accessibility</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">Event Handlers & Conditionals</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="11">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 11</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Finding Inspiration / Building a Portfolio</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">Arrays, Loops & Libraries</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="schedule-item" data-week="12">
<div class="schedule-container">
<div class="schedule-week">
<div class="schedule-week-title">Week 12</div>
</div>
<div class="schedule-content">
<div class="schedule-section schedule-section-design">
<div class="schedule-section-label">Design</div>
<div class="schedule-section-title">Design Careers</div>
</div>
<div class="schedule-section schedule-section-programming">
<div class="schedule-section-label">Programming</div>
<div class="schedule-section-title">Frontend in the Industry</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div id="instructor" class="slide">
<div class="slide-caption-container">
<div class="slide-caption">Instructors</div>
<div class="clear"></div>
</div>
<div class="slide-overlay"></div>
</div>
<div id="faq" class="slide">
<div class="slide-overlay"></div>
<div id="faq-header">
<div id="faq-title">Frequently Asked Questions</div>
<div id="faq-subtitle">Here are the top questions we have gotten over the past few semesters</div>
</div>
<div id="faq-contact">
<div id="faq-contact-caption">Have a question that's not listed here?</div>
<a href="mailto:wddberkeley@gmail.com"><div id="faq-contact-action">
<div id="faq-contact-action-icon"><img class="img-scaled" src="static/icons/mail_color.svg" /></div>
<div id="faq-contact-action-caption">Send us an email</div>
</div></a>
</div>
<div id="faq-content">
<!-- populated via js -->
<div class="clear"></div>
</div>
</div>
<div id="apply" class="slide">
<div class="slide-overlay"></div>
</div>
</div>
</div>
<div class="window-container window-container-scaled window-container-inactive">
<div id="window-header">
<div class="window-header-dot"></div>
<div class="window-header-dot"></div>
<div class="window-header-dot"></div>
<div class="window-header-caption"></div>
<div class="clear"></div>
</div>
<div class="window window-active-cover">
<div id="window-cover" class="window-content"><img class="img-scaled-wh" src="static/images/demo.jpg" /></div>
<div id="window-about" class="window-content">
<div id="about-heading">Build a website from the ground up.</div>
<div id="about-content">
<p>
The demand for learning web programming is at an all-time high, yet for most it's a
question of "where do I start?" The answer is here. As great as online courses are,
nothing beats an in-person class with passionate instructors and compelling assignments.
No matter what your major is, by the end of the semester, you will have built a website
using HTML5, CSS3, and Javascript. Along the way, you'll pick up web design philosophies
and be able to recreate modern design trends like responsive design, flat UI, and skeuomorphism.
</p>
<p>Note that this course covers web design only -- we will not cover server-side programming
like Django and PHP. That said, we consider this far more than a DeCal. Every detail from
assignments to each word spoken in lecture is carefully chosen to provide the best possible
learning experience. We can't wait to see you in the classroom.
</p>
</div>
<div id="about-panel">
<div class="about-panel-item">
<div class="about-panel-icon"><img class="img-scaled" src="static/icons/workload.svg" /></div>
<div class="about-panel-info">
<div class="about-panel-label">Workload</div>
<div class="about-panel-content">2 Units</div>
</div>
<div class="clear"></div>
</div>
<div class="about-panel-item">
<div class="about-panel-icon"><img class="img-scaled" src="static/icons/time.svg" /></div>
<div class="about-panel-info">
<div class="about-panel-label">Time</div>
<div class="about-panel-content">2.5 hrs</div>
</div>
<div class="clear"></div>
</div>
<div class="about-panel-item">
<div class="about-panel-icon"><img class="img-scaled-wh" src="static/icons/door.svg" /></div>
<div class="about-panel-info">
<div class="about-panel-label">Prerequisites</div>
<div class="about-panel-content">None!</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="window-curriculum" class="window-content">
<div id="curriculum-design" class="curriculum-item">
<div class="curriculum-heading">Design</div>
<div class="curriculum-content">
<p>Each lecture is split into two sections. Design section encourages you to challenge
every design decision you've ever seen on webpages. We also love to discuss what
makes well-designed sites on Siteinspire <a href="http://www.siteinspire.com">(www.siteinspire.com)</a>
so fascinating to interact with.
</p>
<p>
About half of design section is devoted to learning the topic of the day. You'll be
amazed how positioning, spacing, and a pinch of Javascript magic can make a plain page
gorgeous. Our brilliant Teaching Staff finish each section by guiding the class through
an awesome hands-on activity.
</p>
</div>
<div class="curriculum-watermark"><img class="img-scaled" src="static/icons/design.svg" /></div>
</div>
<div id="divider">
<div id="divider-caption">Meets</div>
</div>
<div id="curriculum-programming" class="curriculum-item">
<div class="curriculum-heading">Programming</div>
<div class="curriculum-content">
<p>
Programming section is all about rolling up your sleeves and diving into the source code.
Get ready to have your mind blown as you finally learn how those crazy 3D transforms happen,
or how to make those fullscreen slideshow backgrounds. You'll also fall in love with Google
Chrome's Web Inspector, the greatest development tool in history, ever.
</p>
<p>
Our beloved Teaching Staff do a more code-based hands-on activity to finish off programming
section. It's typically awesome, because our Teaching Staff are likewise awesome.
</p>
</div>
<div class="curriculum-watermark"><img class="img-scaled" src="static/icons/code.svg" /></div>
</div>
<div class="clear"></div>
</div>
<div id="window-schedule" class="window-content window-schedule-1">
<div class="window-demo-container">
<div class="window-demo-header">
<div class="window-demo-title">Say hello to Lorem Ipsum</div>
<div class="window-demo-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="window-demo-background"><img class="img-scaled" src="static/images/otter2.jpg" /></div>
<div class="window-demo-overlay"></div>
</div>
<div class="window-demo-content">
<div class="window-demo-canvas">
<div class="window-demo-content-info">
<div class="window-demo-content-info-thumbnail"><img class="img-scaled" src="static/icons/user.svg" /></div>
<div class="window-demo-content-info-author">By Mr. Ipsum, June 13, 2014, 12:53PM</div>
</div>
<div class="window-demo-content-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>
<div id="window-demo-prototype">
<div id="window-demo-prototype-header">
<div id="window-demo-prototype-title"></div>
<div id="window-demo-prototype-subtitle"></div>
</div>
<div id="window-demo-prototype-content">
<div id="window-demo-prototype-canvas">
<div id="window-demo-prototype-thumbnail"></div>
<div id="window-demo-prototype-author"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
<div class="window-demo-prototype-line"></div>
</div>
</div>
</div>
<div id="window-demo-modal-overlay"></div>
<div id="window-demo-modal-group" class="window-demo-modal">
<div class="window-demo-modal-content">
<div class="window-demo-modal-icon"><img class="img-scaled" src="static/icons/pptx.svg" /></div>
<div class="window-demo-modal-caption">Midterm Project Presentation</div>
</div>
</div>
<div id="window-demo-modal-final" class="window-demo-modal">
<div class="window-demo-modal-content">
<div class="window-demo-modal-icon"><img class="img-scaled" src="static/icons/pptx.svg" /></div>
<div class="window-demo-modal-caption">Final Project Presentation</div>
</div>
</div>
</div>
<div id="window-instructor" class="window-content">
<div id="window-instructor-content">
<!-- populated via js -->
</div>
<div id="window-instructor-ta">
<div id="window-instructor-ta-header">
<div id="window-instructor-ta-title">Teaching Staff</div>
<!-- commented the following line because space constraints -->
<!-- <div id="window-instructor-ta-subtitle">This class would not be possible without our fantastic staff!</div> -->
</div>
<div id="window-instructor-ta-content">
<!-- populated via js -->
</div>
</div>
</div>
</div>
</div>
<div id="apply-container">
<div id="apply-header">
<div class="slide-overlay"></div>
<div id="apply-content">
<div id="apply-hero">
<div class="apply-hero-line">This class seeks to empower you with:</div>
<div class="apply-hero-line">the confidence to <u>code</u></div>
<div class="apply-hero-line">the confidence to <u>design</u></div>
<div class="apply-hero-line"><span id="apply-hero-deemph">and altogether - </span>the confidence to <u>create</u>.</div>
</div>
<div id="apply-action">
<!-- populated via js -->
</div>
<div class="clear"></div>
</div>
</div>
<div id="apply-logo"><div id="apply-logo-badge"><img class="img-scaled" src="static/icons/logo.png" /></div></div>
<div id="apply-footer">
<div id="apply-footer-heading">Web Design DeCal</div>
<div id="apply-footer-subheading">Taught with Lots of Love and Caffeine at UC Berkeley.</div>
<div class="slide-overlay"></div>
</div>
</div>
<div id="nav" class="nav-active-cover">
<div id="nav-progress"></div>
<div id="nav-spine"></div>
<div id="nav-content">
<div id="nav-item-cover" class="nav-item nav-item-active">Home</div>
<div id="nav-item-about" class="nav-item">About</div>
<div id="nav-item-curriculum" class="nav-item">Curriculum</div>
<div id="nav-item-schedule" class="nav-item">Schedule</div>
<div id="nav-item-instructor" class="nav-item">Instructors</div>
<div id="nav-item-faq" class="nav-item">FAQ</div>
</div>
<div class="clear"></div>
</div>
<div id="guide">
<div id="guide-caption">Scroll to learn more</div>
<div id="guide-icon"><img class="img-scaled" src="static/icons/arrow_down.svg" /></div>
</div>
<script>
// EDIT CONTENT BELOW
function popUp(window) {
if (width > 600) {
document.getElementByClass("popup").style.display = "none";
} else if (width < 600) {
document.getElementByClass('popup').style.display = "block";
}
};
const state = {
semester: "Spring 2024", // used in content strings below
mode: "DECAL_APPS_OPEN", // options are "DECAL_APPS_OPEN", "DURING_SEMESTER", "TA_APPS_OPEN" (see ctaContent keys below)
url: "http://tinyurl.com/wddsp24" // GOOGLE FORM URL FOR APPLICATION
};
const ctaContent = {
"DECAL_APPS_OPEN": {
"bannerText": `Applications for ${state.semester} are now open! See below for more info.`,
"button":
`<a id="cover-action-live" class="cover-action-item" target="_blank" href="${state.url}">Apply for ${state.semester}</a>`,
"bottomCta":
`<div class="apply-action-item" id="apply-submit">
<div class="apply-action-item-caption" id="apply-submit-caption">Getting pumped?</div>
<a href="${state.url}" target="_blank"><div class="apply-action-item-button" id="apply-submit-button">Apply for ${state.semester}</div></a>
</div>`
},
"DURING_SEMESTER": {
"bannerText": `Applications are now closed for ${state.semester}. No late applications are being accepted at this time (even if you email us!), but check back at the end of the semester!`,
"button":
`<a id="cover-action-live" class="cover-action-item" target="_blank" href="mailto:berkeleywdd@gmail.com">Contact Us</a>`,
"bottomCta":
`<div class="apply-action-item" id="apply-contact">
<div class="apply-action-item-caption" id="apply-contact-caption">Have questions?</div>
<a href="mailto:berkeleywdd@gmail.com"><div class="apply-action-item-button" id="apply-contact-button">Contact Us</div></a>
</div>`
},
"TA_APPS_OPEN": {
"bannerText": `Application and enrollment info for ${state.semester} will be made available near the beginning of the semester! Please check back then.`,
"button":
` <a id="cover-action-live" class="cover-action-item" target="_blank" href="https://wdd.io/go/ta">Apply to be a TA</a>`,
"bottomCta":
`<div class="apply-action-item" id="apply-submit">
<div class="apply-action-item-caption" id="apply-submit-caption">Getting pumped?</div>
<a href="https://wdd.io/go/ta" target="_blank"><div class="apply-action-item-button" id="apply-submit-button" style="margin-top: 5px;">Apply to be a TA</div></a>
</div>`
}
};
const instructorData = [
{
name: "Kathleen Hua",
imgSrc: "static/images/kathleen.png",
linkedinUrl: "mailto:https://www.linkedin.com/in/hua-kathleen/",
email: "mailto:kathleenhua@berkeley.edu",
blurb: "Hello, I’m Kathleen! I’m a sophomore studying Computer Science and I’ll be one of your instructors for WDD this semester. I’m super excited to get to know everyone and share what I know about web design with y’all!",
},
{
name: "Kylie Noa",
imgSrc: "static/images/kylie.jpg",
linkedinUrl: "https://www.linkedin.com/in/kylie-p-75ba07209?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app",
email: "mailto:criispy@berkeley.edu",
blurb: "Hi everyone, I'm Kylie and I'm happy to be one of your instructors this semester! I'm a data science major but find a lot of joy in designing websites. I'm looking forward to sharing that with all of you, feel free to reach out anytime!",
},
];
const taData = [
{
name: "Evan Lim",
imgSrc: "static/images/evan.jpg",
url: "https://www.linkedin.com/in/evan-lim-611445227/",
},
{
name: "Kelly Tran",
imgSrc: "static/images/kelly-tran.jpg",
url: "https://kxllytrxn.github.io/",
},
{
name: "David Qing",
imgSrc: "static/images/david-q.jpg",
url: "https://www.linkedin.com/in/davidqing/",
},
{
name: "Grace Yang",
imgSrc: "static/images/grace.jpg",
url: "https://www.linkedin.com/in/graceyang-ucb",
},
];
const faqData = [
// {
// "question": "If I cannot attend part of the lecture or lab, can I still take this class?",
// "answer": "No, we would not recommend applying. Points lost from absences and missed material will add up."
// },
{
"question": "How is this class graded?",
"answer":
`<div>Here's our grading breakdown:</div>
<div><span style="color: #de6868; margin-right: 12px;">Homework</span><strong>40%</strong></div>
<div><span style="color: #78c272; margin-right: 12px;">Midterm Project</span><strong>24%</strong></div>
<div><span style="color: #6392c0; margin-right: 12px;">Final Project</span><strong>32%</strong></div>
<div><span style="color: #de6868; margin-right: 12px;">Attendance</span><strong>4%</strong></div>
<div>You will get a P if you have 70% or higher final grade.</div>`
},
{
"question": "Is lab and lecture mandatory?",
"answer": "Lab attendance is not required, but <strong> highly recommended </strong> to get help on any assignments and meet your fellow classmates! To earn all 4 points for attendance, you must attend at least 4 in-person lectures. Lectures will also be recorded, but we highly coming in-person as the demos are more enjoyable live!"
},
{
"question": "Can I audit the class?",
"answer": "Yes, you are welcome to audit the class. Note that auditors will not be apart of live lectures, but will still have access to all recorded lectures on our Youtube (https://www.youtube.com/user/wddlive)."
},
{
"question": "I'm thinking about taking WDD next semester. When will all of the CCN / enrollment info be available?",
"answer": "Not all enrollment information is available before semester starts due to the timeline by which DeCals are organized on campus. Enrollment applications open toward the beginning of the semester and CCNs are distributed to accepted students at the first class."
},
{
"question": "When and where are classes?",
"answer": `${state.semester} Labs will be every <strong> Monday 7:00–8:00pm </strong> (Physics 2) and lectures every <strong> Thursday 6:30–8pm </strong> (Physics 2).`
},
{
"question": "Can I take this class for a letter grade?",
"answer": "Because this class is a DeCal, you can only take this class on a P/NP basis, where you will get a P if you get 70% or higher."
},
{
"question": "What's your application criteria?",
"answer": "We mainly decide based on your responses to the Short Answer questions of the application, but we do give slight preference for previous applicants and seniors."
},
{
"question": "Do I need previous programming experience?",
"answer": "Nope! We teach you all the basics of everything you will need in this class."
},
{
"question": "If I'm a graduate student, can I take this class?",
"answer": "Yes!"
},
];
// render content!
const faqTemplate = (faq) =>
`<div class="faq-item">
<div class="faq-item-header">
<div class="faq-item-header-dot"></div>
<div class="faq-item-header-dot"></div>
<div class="faq-item-header-dot"></div>
<div class="clear"></div>
</div>
<div class="faq-item-content">
<div class="faq-item-question">${faq.question}</div>
<div class="faq-item-answer">${faq.answer}</div>
</div>
</div>`;
const instructorTemplate = (instructor, index) =>
`<div class="window-instructor-item">
${index % 2 !== 0 ? `<div class="window-instructor-popover">${instructor.blurb}</div>` : ""}
<div class="window-instructor-info">
<div class="window-instructor-thumbnail"><img class="img-scaled-wh" src="${instructor.imgSrc}" /></div>
<div class="clear"></div>
<div class="window-instructor-name">${instructor.name}</div>
<div class="window-instructor-link">
${instructor.linkedinUrl ? `<a href="${instructor.linkedinUrl}" target="_blank"><div class="window-instructor-link-item"><img class="img-scaled" src="static/icons/linkedin.png" /></div></a>` : ""}
<a href="mailto:${instructor.email}"><div class="window-instructor-link-item"><img class="img-scaled" src="static/icons/mail_color.svg" /></div></a>
${instructor.websiteUrl ? `<a href="${instructor.websiteUrl}" target="_blank"><div class="window-instructor-link-item"><img class="img-scaled" src="static/icons/website_color.svg" /></div></a>` : ""}
<div class="clear"></div>
</div>
</div>
${index % 2 === 0 ? `<div class="window-instructor-popover">${instructor.blurb}</div>` : ""}
<div class="clear"></div>
</div>`;
const taTemplate = (ta) =>
`<div class="window-instructor-ta-item">
<div class="window-instructor-ta-thumbnail"><img class="img-scaled-wh" src="${ta.imgSrc}" /></div>
<div class="window-instructor-ta-info">
<div class="window-instructor-ta-name">${ta.name}</div>
</div>
<a href="${ta.url}" target="_blank"><div class="window-instructor-ta-link"><img class="img-scaled" src="static/icons/website.svg" /></div></a>
<div class="clear"></div>
</div>`;
document.getElementById('banner-text').innerHTML = ctaContent[state.mode].bannerText;
document.getElementById('cover-action-button').innerHTML = ctaContent[state.mode].button;
document.getElementById('apply-action').innerHTML = ctaContent[state.mode].bottomCta;
document.getElementById('faq-content').innerHTML = faqData.map(faqTemplate).join("");
document.getElementById('window-instructor-content').innerHTML = instructorData.map(instructorTemplate).join("");
document.getElementById('window-instructor-ta-content').innerHTML = taData.map(taTemplate).join("");
</script>
</body>
</html>