-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex-archive.html
690 lines (667 loc) · 37.6 KB
/
index-archive.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Media at PSU Fall 2020</title>
<link rel="stylesheet" href="/css/meyer-reset.css" />
<link rel="stylesheet" href="/css/style.css" />
<meta name="description" content="Student support website for Interactive Media classes at Portland State University in Oregon. Resources and information about html, css, and javascript." />
<meta name="keywords" content="Portland State University, Interactive Media Design, HTML, CSS, JavaScript" />
<meta name="author" content="Alanna Risse" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<!-- Essential META Tags -->
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://gmurrey.github.io/Projects/Project2/images/screenshot.png">
<meta property="og:url" content="http://gmurrey.github.io/Projects/Project2/">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="Psu Interactive Media">
<meta name="twitter:image:alt" content="PSU Interactive Media">
<!-- Non-Essential, But Required for Analytics -->
<meta name="twitter:site" content="@alannarisse">
</head>
<body>
<nav class="nav">
<div class="logo">
<a href="/index.html"
><h4>psuinteractivemedia</h4>
<img src="images/logo.png"
/></a>
</div>
<div class="icon">
<div class="hamburger"></div>
</div>
<div class="menu-mobile">
<ul id="topnavlist"></ul>
</div>
</nav>
<header>
<h1>interactive media i & ii</h1>
<h2>makin' websites and makin' 'em move.</h2>
</header>
<div class="container-grid">
<main>
<section>
<article>
<h3>Week 10 Winter 2021</h3>
<h4>Design Systems to know about</h4>
<ul class="cards portfolio-cards">
<li><a href="https://material.io/design"><img src="images/libraries/material-design.png">Google's Material Design</a></li>
<li><a href="https://getbootstrap.com/">Bootstrap</a></li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Mon March 8th</h3>
<ul>
<li>Do you peer reviews!</li>
<li>Bootstrap, Material Design, Design Systems talk</li>
<li>Things to avoid: positionL absolute, NOT using flexbox or css-grid, margins or padding over 100px.</li>
</ul>
<h3>Wed March 10th</h3>
<ul>
<li>Party! Lets look at some websites</li>
<li>You can still get help!</li>
<li></li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Mon March 8th</h3>
<ul>
<li>Do you peer reviews!</li>
<li></li>
</ul>
<h3>Wed March 10th</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 9</h3>
<ul class="cards portfolio-cards">
<li><a href="https://studio-io.com/" target="_blank"><img src="/images/sites/studio-io.png">Studio-IO</a></li>
</ul>
<p>Holy cow it's week 9!
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Mon March 1st</h3>
<ul>
<li>A link to the P1 Self Evaluation form is up! <a href="https://3.basecamp.com/3840950/buckets/20215530/documents/3522957874">Please fill one out</a> for project one.</li>
<li>Let's get rolling on coding out project 2! Two weeks of class time left.</li>
<li>I see there are only 11 of you with wireframes so far, and less with design compositions, let's talk about those today.
</ul>
<h3>Wed March 3rd</h3>
<ul>
<li>If you need help, ping me on Basecamp. if I can't answer your problem with a video, I'll send you the link to my calendar.</li>
<li>Reminder very last day to turn things in is March 18th.</li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Mon March 1st</h3>
<ul>
<li><a href="https://3.basecamp.com/3840950/buckets/20215531/vaults/3522786327"></a>Peer Reviews Topic is a 'Go.'</li>
<li>A link to the P1 Self Evaluation form is up! <a href="https://3.basecamp.com/3840950/buckets/20215530/documents/3522957874">Please fill one out</a> for project one.</li>
<li>Let's get rolling on coding out project 2! Two weeks of class time left.</li>
<li>Let's get rolling on coding out project 2! Two weeks of class time left.</li>
<li>If you need help, ping me on Basecamp. if I can't answer your problem with a video, I'll send you the link to my calendar.</li>
</ul>
<h3>Wed March 3rd</h3>
<ul>
<li>Reminder very last day to turn things in is March 18th.</li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 8</h3>
<ul class="cards portfolio-cards">
<li><a href="https://theoatmeal.com/"><img src="/images/sites/theoatmeal.png"></a></li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Mon Feb 22nd</h3>
<ul>
<li>Media Queries demo</li>
<li>Be Honest Schedule</li>
</ul>
<h3>Wed Feb 24th</h3>
<ul>
<li>animated images on nav demo</li>
<li>Slick Slideshow demo</li>
<li>Bryan code start class demo</li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Mon Feb 22nd</h3>
<ul>
<li>Be Honest Schedule</li>
</ul>
<h3>Wed Feb 24th</h3>
<ul>
<li>animated nav item demo</li>
<li>catch up week!</li>
<li>Watch <a href="https://www.youtube.com/watch?v=UQNeNl0ISJo&feature=emb_logo">Tatiana Mac video</a>!</li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 7</h3>
<p>Snowpocalypse. Many of us are without power.</p>
<ul class="cards portfolio-cards">
<li><a href="https://www.titusmotion.com/"><img src="/images/sites/titus.png">Titus</a></li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Mon Feb 15th</h3>
<ul>
<li>No classes online or in pwerson at PSU. Many without power.</li>
</ul>
<h3>Wed Feb 17th</h3>
<ul>
<li>Basically deadlines are out the window because of the power. The very last deadline is March 18th.</li>
<li>Assignment 6 - <a href="https://3.basecamp.com/3840950/buckets/20215530/vaults/3390648212">Media Queries</a> is due before you start coding project 2.</li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Mon Feb 15th</h3>
<ul>
<li>No classes online or in pwerson at PSU. Many without power.</li>
</ul>
<h3>Wed Feb 17th</h3>
<ul>
<li>Media Queries <a href="https://www.youtube.com/watch?v=jRddUr_bXSk&feature=emb_title">refresher</a></li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 6</h3>
<ul class="cards portfolio-cards">
<li><a href="https://josecazares.com/"><img src="/images/sites/jose-cazares.png">José Cazares</a></li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Mon Feb 8th</h3>
<ul>
<li>Check in about: git and github, images, fonts, linking pages, what else?</li>
<li>Check in with kevin e</li>
</ul>
<h3>Wed Feb 10th</h3>
<ul>
<li></li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Mon Feb 8th</h3>
<ul>
<li>Troubleshooting</li>
<li>check in with cedar</li>
</ul>
<h3>Wed Feb 10th</h3>
<ul>
<li>Work day!</li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 5</h3>
<ul class="cards portfolio-cards">
<li><a href="https://www.digitalmarmalade.co.uk/" target="_blank"><img src="images/sites/digital-marmalade.png">Digital Marmalade</a></li>
<li><a href="https://viviariums.com/" target="_blank"><img src="images/sites/vivian-wu.png">Vivian Wu</a></li>
<li><a href="https://landbacklandforward.weebly.com/" target="_blank"><img src="images/sites/landbacklandforward.png">Land Back Land Forward</a></li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Monday Feb 1st</h3>
<ul>
<li>I have to leave a couple minutes before 5</li>
<li>Start coding project 1!</li>
<li><a href="https://css-tricks.com/play-sound-on-hover/" target="_blank">Sound demo</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLg7s6cbtAD15G8lNyoaYDuKZSKyJrgwB-">Learn more about git and GitHub</a></li>
</ul>
<h3>Wednesday Feb 3rd</h3>
<p>JQuery demo. slides and <a href="https://psuinteractivemedia.com/in-class-demos/jquery_intro/index.html">code</a></p>
<p>Work, work, work</p>
</div>
<div>
<h2>DES342</h2>
<h3>Monday Feb 1st</h3>
<p>Talk about ways to get project 1 going</p>
<h3>Wednesday Feb 3rd</h3>
<p>Work, work work.</p>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 4</h3>
<h4>Inspriring sites of the week:</h4>
<ul class="cards portfolio-cards">
<li><a href="https://soundsaboutriso.online/" target="_blank"><img src="images/screens/soundsaboutriso.png" alt="Sounds About Riso">Sounds About Riso</a></li>
<li><a href="https://eyeondesign.aiga.org/milton-glaser-analyzes-olympic-logo-design-through-the-ages/" target="_blank"><img src="images/screens/eye-on-code.png">Eye on Design</li>
<li><a href="https://getwellsoon.labr.io/" target="_blank"><img src="images/screens/get-well-soon.png">Get Well Soon!</a></li>
<li><a href="https://sites.google.com/pdx.edu/virtual-mindspa/home" target="_blank"><img src="images/screens/virt-mind-spa.png">SHAK's vritual spa website</a></li>
</ul>
<br><br>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Monday Jan 25th</h3>
<li>Talk about position absolute</li>
<li>brainstorm for absolute position 1-page site ideas</li>
<li>One-on-ones with instructor while class works in pairs on absolute position projects.</li>
<li>Optional extra work session Thursday 1/28 7-8:30pm</li>
<li></li>
<h3>Wednesday Jan 27th</h3>
<ul>
<li>Rough of Project 1 Design Comp for in-class discussion</li>
<li>What's a Design Composition for? How to be ready for Monday's small group crit. Here's some stuff to ask:
<ul>
<li>Who's this site for?</li>
<li>What does this site show/teach/do?</li>
<li>Does the site flow/navigation make sense? Do you know what to do?</li>
<li>Is there a clear content hierarchy?</li>
<li>Are the color and typography choices informing/aiding/enhancing the content?</li>
<li>Discuss opportunities for interaction</li>
</ul>
</li>
<li>Let's look at Ali's layout for coding planning</li>
<li>Here's an optional <a href="https://github.com/alannarisse/project-template-v3">project template you can use</a></li>
<li>Optional drop in work session tomorrow 7pm-8:30 in <a href="http://psu.gd/alannasroom">my virtual room</a></li>
</ul>
</div>
<div>
<h2>DES342</h2>
<h3>Monday Jan 25th</h3>
<ul>
<li>Small Group discussions on design comp for project 1</li>
<li>Optional extra work session Thursday 1/28 7-8:30pm</li>
<li>Scroll trigger Homework</li>
</ul>
<h3>Wednesday Jan 27th</h3>
<ul>
<li><a href="resources.html">parallax demo</a></li>
<li><a href="http://andobe.com/moog/">Moog site</a></li>
<li>Optional drop in work session tomorrow 7pm-8:30 in <a href="http://psu.gd/alannasroom">my virtual room</a></li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 3</h3>
<ul class="cards portfolio-cards">
<li>
<a href="https://www.spatialize.com/"><img src="images/sites/spatializedotcom.png"></a>
</li>
<li>
<a href="https://howtotalktowhitekidsaboutracism.com/"><img src="images/sites/racism-white-kids.png"></a>
</li>
<li>
<a href="https://cannesprlions.com/en/lionsnews/"><img src="images/sites/cannes-pr-lions.png"></a>
</li>
<li>
<a href="https://otterdev.io/"><img src="images/sites/otterdevio.png"></a>
</li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
Monday Jan 18th - NO CLASS MLK DAY<br>
Wednesday Jan 20th
<ul>
<li><a href="https://art341w18.wordpress.com/2018/02/13/project-2-moodboard-wireframes-and-comps/">Talking about comps</a></li>
<li>Talking about <a href-https://meyerweb.com/eric/tools/css/reset/">meyer reset css file</a></li>
<li>Talkin'bout <a href="https://tinypng.com/">TinyPNG.com</a> for image shrinking</li>
</ul>
</div>
<div>
<h2>DES342</h2>
Monday Jan 18th - NO CLASS MLK DAY<br>
Wednesday Jan 20th
<ul>
<li>skrollr demo for when a class or id is "in view"</li>
<li>What's a Design Composition for? How to be ready for Monday's small group crit. Here's some stuff to ask:
<ul>
<li>Who's this site for?</li>
<li>What does this site show/teach/do?</li>
<li>Does the site flow/navigation make sense? Do you know what to do?</li>
<li>Is there a clear content hierarchy?</li>
<li>Are the color and typography choices informing/aiding/enhancing the content?</li>
<li>Discuss opportunities for interaction</li>
</ul>
</li>
</ul>
</div>
</div>
<hr />
</article>
<article>
<h3>Week 2</h3>
<div class="grid-2">
<div>
<h2>DES341</h2>
Monday Jan 11th
Wednesday Jan 13th
<p>Review!</p>
<p>Introduce <a href="https://3.basecamp.com/3840950/buckets/20215530/vaults/3338729935" target="_blank">Typography assignent</a></p>
<p>Sketch wireframes</p>
</div>
<div>
<h2>DES342</h2>
Monday Jan 11th
Wednesday Jan 13th
</div>
</div>
<hr />
</article>
<article>
<h3>Week 1</h3>
<h4>Inspiratation for the week</h4>
<ul class="cards portfolio-cards">
<li><a href="https://www.youtube.com/watch?v=_vBggxCNNno" target="_blank"><img src="images/videos/moral-biases.png">The moral bias behind your search results (9 minute video)</a></li>
<li><a href="https://reflektor.digital/"><img src="images/portfolios/reflektor.png">Reflektor Digital</a> - nice action-packed agency website</li>
</ul>
<div class="grid-2">
<div>
<h2>DES341</h2>
<h3>Monday Jan 4th</h3>
<p>Hello Interactive Media I! Today we will:</p>
<ul>
<li>take roll</li>
<li>go over the syllabus</li>
<li>get some accounts set up</li>
<li>play with html</li>
<li>meet in pairs and work on co-introductions</li>
</ul>
<h4>Assignment 1</h4>
<a href="https://3.basecamp.com/3840950/buckets/20215530/vaults/3338726790" target="_blank">On Basecamp</a>
<h4>Assignment 2</h4>
<p><a href="https://3.basecamp.com/3840950/buckets/20215530/vaults/3338728869" target="_blank">On Basecamp</a></p>
<h5>Examples</h5>
<ul>
<li><a href="https://maxadocious.github.io/homework/hw1-narrative/index.html" target="_blank">Blazers line-up</a></li>
<li><a href="homework/hw1-narrative/" target="_blank">opening a bag of chips</a></li>
<li><a href="https://sdearmas.github.io/homework/hw1-narrative/hw1-narrative-homepage.html" target="_blank">How to pump your own gas</a></li>
</ul>
<p>WAIT!!!!! Check your work with <a href="homework/hw1homeworkcheck.pdf" target="_blank">this handy guide!</a> (right click)</p>
<h3>Wednesday Jan 6th</h3>
<p>Install Visual Studio Code and Github Desktop</p>
<p>Look at the second assignment</p>
<p>Look at Project One</p>
</div>
<div>
<h2>DES342</h2>
<h3>Monday Jan 4th</h3>
<p>Hello Interactive Media II! Today we will:</p>
<ul>
<li>take roll</li>
<li>go over the syllabus and the class</li>
<li>Get to know each other</li>
<li>play with HTML and CSS</li>
<li>Talk about the first assignment</li>
</ul>
<p></p>Assignment 1, Single page warmer-upper
<a href="https://3.basecamp.com/3840950/buckets/20215531/documents/3341664908" target="_blank"></a>Basecamp link</a></p>
<h3>Wednesday Jan 6th</h3>
<p>Do round robin narrative exercise and show demo code for horizontal scroll site.</p>
</div>
</div>
<hr />
</article>
</section>
<section>
<article>
<h3>Beyond!</h3>
<p><a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp.org</a> has... you guessed it! A free code camp! Actually they have several paths to choose from. A few front-end ones are: responsive web design, front-end libraries. They also have a fantastic <a href="https://youtube.com/freecodecamp" target="_blank">YouTube channel</a> chock full of videos.</a>
<p>I just discovered <a href="https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ" target="_blank">Coder Coder</a>. She focuses on front-end HTML and CSS</p>
<p>I really love <a href="https://www.skillshare.com/" target="_blank">skillshare</a> for classes on front-end web development and design, UX, UI, and branding. It's a monthly subscription that costs $15 a month. They have some <a href="https://www.skillshare.com/browse/free-classes" target="_blank">free classes</a> too</p>
<p><a href="https://p5js.org/" target="_blank">p5.js</a>, the javascript version of the processing library that is taught in the creative coding class is a fun way to add animations to your websites.</p>
<p>You can buy your own custom domain and hook it up to github pages! Yep! For like less than $10 a year, you can have a free website. Here's <a href="https://www.namecheap.com/support/knowledgebase/article.aspx/9645/2208/how-do-i-link-my-domain-to-github-pages" target="_blank">how to set it up if you register with namecheap</a>. Here's <a href="https://medium.com/@steve_jones/4-how-to-point-a-domain-on-google-domains-to-github-pages-1d4c24f01382" target="_blank">how to set it up if you register through google domains</a>.</p>
<p><a href="https://www.youtube.com/user/LearnWebCode" target="_blank">LearnWebCode</a> has a Learn HTML, Learn CSS, and Learn JQuery and Javascript playlist on his YouTube channel.</p>
</article>
<article>
<h3>Week 10</h3>
<p>Nov 30th - Dec 6th LAST WEEK OF CLASSES</p>
<p><a href="https://3.basecamp.com/3840950/buckets/18702888/documents/3252263794" target="_blank">Basecamp</a> page for the week. Highlights: Finish up homeworks and projects! Do your interaction report. Do you peer reviews. Fill out your self evaluations. </p>
<p><a href="https://psu.gd/events/virtual-good-market/" target="_blank"><img src="images/home/virtualgood.jpg"></a><br>
Virtual Good: Nov 30 - Dec 4</p>
<p>
<a href="https://psu.gd/save-the-date-fresh-portfolio-review/" target="_blank"><img src="images/home/fresh.png"></a></p>
<p>In a time when the world has become still, PSUGD wants to bring a fresh perspective into the virtual world we are living in.</p>
<p>20 students are graduating from the program this term and are full of energy and a passion to bring movement and humanity back into our daily lives.</p>
<p>Please accept our invitation to come and meet these Fresh students – they are eager to show you all of their hard work and to receive your design expertise insights.</p>
<p>A Fresh Perspective<br>
PSU’s Graphic Design Senior Showcase<br>
Dec 4th, 202012pm – 8pm PSTA<br>
<a href="https://psu.gd/save-the-date-fresh-portfolio-review/" target="_blank">virtual event to connect.</a></p>
</article>
<hr>-->
<article>
<h3>Week 9</h3>
<p>Nov 23rd - Nov 29th</p>
<p><a href="https://3.basecamp.com/3840950/buckets/18702888/documents/3237228154" target="_blank">Basecamp</a> page for the week. Highlights: add meta tags to your projects and do the audio homework.</p>
<p><strong>Write: Design journal prompt:</strong> This one's about "why." Read this article (try to pretend it's not a cheezy article about business success). Spend some time thinking about why you are pursuing a career in design. Really dig down, do the 7 "whys" tool in the article. OR If that's too challenging right now, consider people in your life or people who've inspired you. Think about what drives them, what their "why" is. Why did they work so hard to do XYZ, was it from past experiences they had, was it because they saw a need they were called to fill? What's their deeper "why?" Ask them if you know them, or look up some biographical information and try to figure it out. Write about either you or your inspiration.</p>
<p>Add an inspiring site of the week. This one's not a site, but I love the idea of a vector illustration a day and I like that she did them in series'. <a href="https://medium.com/the-100-day-project/100-days-of-vector-illustration-6f2f10209b0b" target="_blank">https://medium.com/the-100-day-project/100-days-of-vector-illustration-6f2f10209b0b</a></p>
<hr>
</article>
<article>
<h3>Week 8</h3>
<p>Nov 16th - Nov 22nd</p>
<p><a href="https://3.basecamp.com/3840950/buckets/18702888/documents/3214308301">Basecamp link</a></p>
<p><strong>Show And Tell!</strong></p>
</article>
<article>
<h3>Week 7</h3>
<p>Nov 9th - Nov 15th</p>
<p><a href="https://3.basecamp.com/3840950/buckets/18702888/documents/3206668656">basecamp</a></p>
<p><strong>Show And Tell!</strong> November 12th: <a href="https://psu.gd/events/show-tell-dinesh-dave/">Dinesh Dave</a></p>
</article>
<article>
<h3>Week 6</h3>
<p>Nov 2nd - Nov 8th</p>
<p><a href="https://3.basecamp.com/3840950/buckets/18702888/documents/3168524520">Basecamp</a></p>
<p><strong>Animation Resources</strong></p>
<p><strong>Animation Student Examples of Previous Project 3 Posters</strong></p>
<ul>
<li><a href="http://web.pdx.edu/~iris4/Totoro/" target="_blank">Totoro Poster</a></li>
<li><a href="http://web.pdx.edu/~ablee/disneyposter/index.html">Disney Poster</a></li>
<li><a href="http://web.pdx.edu/~gcont2/project_3/index.html">Dirty Harry Poster</a></li>
<li><a href="http://web.pdx.edu/~gcont2/project_1/characters.html">Lucha Libre Poster</a></li>
<li><a href="http://web.pdx.edu/~talan/Piggy/index.html">Lord of the Flies Poster</a></li>
<li><a href="http://web.pdx.edu/~dawatson/341/flight-of-the-conchords/">Flight of the Concords</a></li>
</ul>
<p><strong>Show And Tell!</strong> November 5th: Ali Godil/ House of Gul</p>
</article>
<article>
<h3>Week 5</h3>
<p>Oct 26th - Nov 1st - MIDTERM</p>
<p>
<strong>Watch:</strong> <a href="https://www.youtube.com/watch?v=Xf9MBdCrecE" target="_blank">CSS Zen Garden: Layering background images (15 mins)</a><br />
My video on <a href="https://www.youtube.com/watch?v=H8YATDgBTo8&list=PLBWwcoNITxG_ZI1RF7iHVTG51vIK6CNQZ&index=1&t=72s" target="_blank">the CSS Animate It library</a><br />
My video on <a href="https://www.youtube.com/watch?v=kxAaShurl78&list=PLBWwcoNITxG_ZI1RF7iHVTG51vIK6CNQZ&index=2" target="_blank">animated text demo</a><br />
My video on an <a href="https://www.youtube.com/watch?v=1YiRngTLj6w&list=PLBWwcoNITxG_ZI1RF7iHVTG51vIK6CNQZ&index=3&t=32s" target="_blank">image carousel library called slick.js</a><br />
<a href="https://www.youtube.com/watch?v=5QYmmo61u2M&list=PLBWwcoNITxG_ZI1RF7iHVTG51vIK6CNQZ&index=4" target="_blank">A simple button animation</a> (the video weirds out in the middle but comes back)<br />
<a href="https://www.youtube.com/watch?v=QLGeu9j2MAk&list=PLBWwcoNITxG_ZI1RF7iHVTG51vIK6CNQZ&index=5&t=2s" target="_blank">Animating SVGS</a>
</p>
<p><strong>Homework:</strong> Watch Omoju Miller talk and write response paper</p>
<p><strong>Read:</strong> Duckett Javascript&JQuery chapters 4, 5, and 6. Click "code" button for download link <a href="https://github.com/rlx310/L_Javascript_Duckett_Interactive-Front-End-Web-Development_Edition-1" target="_blank">on this github repo</a>.</p>
<p><strong>Write:</strong></p>
<p><strong>Show And Tell! </strong> October 29th: Marisol Ortega</p>
<p>
<strong>My personal site inspiration of the week:</strong><br />
<a href="https://www.allyshipandaction.com/events/the-state-of-equity" target="_blank"
><img src="images/sites/allyshipandaction.png" alt="Allyship and Action" /><br />
Allyship and Action - State of Equity Conference</a
>
</p>
</article>
<article>
<h3>Week 4</h3>
<p>Oct 19th - 25th</p>
TO DO Keep working on Project 1 If you haven't finished design comps or wireframes, make sure to get to those. Start coding project 1. On Wednesday we'll do more code demos in class and I may do some breakout rooms to help people who haven't been able to get a 1 on 1 yet. Add these to your css file in project 1: body { margin: 0;} * {box-model: border-box
<p>
<strong>Make:</strong> Homework <br />
Read Chapter 7 (forms) of Duckett HTML and CSS and create a contact form on your homepage (or a separate contact.html page if you like). Use https://getsimpleform.com/ to make it actually useful! Due Monday Oct 26. Post a link to your form in homework 4 Homework 4 - Contact Form! Due 10/26 - DES 341 FA20 but also, add a link to your homepage!
</p>
<p>
<strong>Write: </strong>journal prompt<br />
Read this short article https://hbr.org/2019/08/learning-is-supposed-to-feel-uncomfortable and this one on resistance https://www.mindful.org/the-neuroscience-of-resistance-and-how-to-overcome-it/. Considering these articles, make a list of 5 things to keep you going when you feel resistance or discomfort.<br />
Add a site inspiration of the week
</p>
<p><strong>Watch:</strong> Thirty Minute flexbox video by LearnWebCode on Youtube: https://www.youtube.com/watch?v=k32voqQhODc</p>
<p>
<strong>Read:</strong><br />
Duckett Chapter 7(forms), 8(tables), 14(boxes) Think: Think about Project 2 and what you might want to do for it. OPTIONAL BUT HELPFUL Videos that are helpful: Everyone's starter code: I worked on elements of man of your sites. You're welcome to pilfer each other's code to help you get parts working on your own sites. <br /><br />
live: https://psuinteractivemedia.com/student-code/<br />
code: https://github.com/alannarisse/psuinteractivemedia/tree/master/student-code<br /><br />
live: https://psuintercactivemedia.com/in-class-demos/button-anim<br />
code: https://github.com/alannarisse/psuinteractivemedia/tree/master/in-class-demos/button-anim/index.html<br /><br />
Book some time with me https://calendly.com/arisse/psu-office-hours?month=2020-10
</p>
<p><strong>Show And Tell!</strong> October 22nd: The Beauty Shop / Visible</p>
<section>
<a href="https://psu.gd/show-and-tell/" target="_blank"><img src="images/showntell.jpg" /></a>
<p>All take place via the magical zoom link: psu.gd/show-and-tell</p>
</section>
</article>
<article>
<h3>Week 3</h3>
<p>Oct 12th - 18th</p>
<p>We'll be focusing on getting those design comps done, and getting started on basic html layouts for Project 1.</p>
<p><strong>Watch:</strong></p>
<p><strong>Make:</strong> Design Comps</p>
<p><strong>Read:</strong> Duckett HTML&CSS Links and Images chapters 4 & 5 (pps 75-124), chapter 12</p>
<p><strong>Write:</strong></p>
<p><strong>Show And Tell!</strong> October 15th: Tsilli Pines from Instrument</p>
</article>
<article>
<h3>Week 2</h3>
<p>Oct 5th - 11th</p>
<p>
<strong>Watch:</strong><br />
Part 1: HTML+CSS Adding Clickable Image to Homepage<br />
Part 2: HTML+CSS adding google fonts to your homepage<br />
Part 3: HTML+CSS Background images using unsplash and tinypng<br />
Part 4: HTML+CSS - simple multi-column layouts with flexbox<br />
And only if needed: <br />
Part 0: HTML+CSS - Start Here! All the set up info you need for the interactive media classes<br />
Part 1: Space! ...in HTML and CSS<br />
Part 2: Space!... In HTML and CSS<br />
Figma Part 1: Creating Wireframes (TBD)
</p>
<p>
<strong>Make:</strong> Homework 2: Project One Wireframes<br />
Optional: Wired25 response paper
</p>
<p><strong>Read:</strong> Duckett HTML&CSS Text and Lists chapters 2 & 3 (pps 37-70), chapter 11 color (pps 246-260)</p>
<p><strong>Write:</strong> <em>Design Journal Prompt for week two:</em> What are you planning to do for project 1? What content do you plan to show? How will you make each page unique while maintaining a cohesive design across the project? How will your color palette, imagery, and typography choice complement your subject matter?</p>
<p><strong>Project One Intro</strong>: <a href="/terms/wi10des341/index.html">previous class projects</a></p>
<p>Inspiring site of the week: <a href="https://aware-app.vercel.app/dashboard">Aware app</a> This is an app that a student in the web development program at my other job did. It's simple but powerful. It uses Cognitive Behavior Therapy to walk you throuhg a stressful event and help you to reframe it.</p>
<p><strong>Show And Tell!</strong> October 7th: Alumni Talks with a variety of former PSUGD students all doing a variety of things!</p>
</article>
<article>
<h3>Week 1</h3>
<p>Sept 28 - Oct 4</p>
<p><strong>Watch:</strong></p>
<p><strong>Make:</strong> This week's homework is to create a single narrative site. Four or five images and some links to take you through a series of pages. See examples below for ideas.</p>
<p><strong>Read:</strong> Duckett HTML&CSS: Intro and chapter 1 (pps 3 - 36), chapter 10 Introducing CSS (pps 226-244)</p>
<p><strong>Write: What do you hope to achieve in this class by the end of the term? Are there special projects or technologies you’d like to see covered by the end of the term? Is there a site (or two) that gives you butterflies in your stomach? What is it?</strong></p>
<h4>Inspiration for the week</h4>
<a href="https://www.dothewerq.com/"><img src="images/sites/dothewerq.png" class="inspire" alt="" /></a>
</article>
</section>
<section>
<h2>Homework 1</h2>
<h3>Examples</h3>
<ul>
<li><a href="homework/hw1-narrative/">opening a bag of chips</a></li>
</ul>
<p>WAIT!!!!! Check your work with <a href="homework/hw1homeworkcheck.pdf"></a>this handy guide!</p>
</section>
</main>
<aside>
<h3>dates</h3>
<table>
<tr>
<td>oct 4:</td>
<td>last day of 100% refund<br />last day to add classes</td>
</tr>
<tr>
<td>oct 11:</td>
<td>last day of 70% refund<br />last day to drop without a 'W'<br />last day to waive health insurance</td>
</tr>
<tr>
<td>oct 18:</td>
<td>last day of 40% refund ('W' on transcript)</td>
</tr>
<tr>
<td>oct 25:</td>
<td>last day of 20% refund ('W' on transcript)</td>
</tr>
<tr>
<td>nov 11:</td>
<td>NO CLASSES</td>
</tr>
<tr>
<td>nov 15:</td>
<td>last day to withdraw ('W' on transcript)</td>
</tr>
<tr>
<td>nov 26-27:</td>
<td>NO CLASSES</td>
</tr>
<tr>
<td>dec 6:</td>
<td>classes end</td>
</tr>
<tr>
<td>dec 7-12:</td>
<td>finals week</td>
</tr>
<tr>
<td>dec 16:</td>
<td>grades available online</td>
</tr>
</table>
<br />
<h3>links</h3>
<ul>
<li><a href="">our basecamp page</a></li>
<li><a href="http://psu.gd" target="_blank">PSU.gd website</a></li>
</ul>
</aside>
</div>
<div class="ack">
<p>We acknowledge that we live and rest on the traditional lands of the Multnomah, Kathlamet, Clackamas, bands of the Chinook, Tualatin Kalapuya, Molalla and many of other Tribes of Chinook that lived in these places that we now recognize as the Portland metro area. We thank the descendants of these tribes for being the original stewards and protectors of these lands since time immemorial. We are honored guests upon all sacred places and ancestral lands - We thank you.</p>
<!-- Portland State University sits on the ancestral homelands of the Multnomah, Kathlamet, Clackamas, Tumwater, Watala band of the Chinook, the Tualatin Kalapuya and many other Indigenous nations of the Columbia River. -->
</div>
<footer>
<ul id="footernavlist"></ul>
</footer>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
</body>
</html>