Schedule

Week 1

Day 1: Setup + Intro to the Internet & Design Principles

0. Intro, Design Principles, Internet 101, Setup, Terminal, Git Version Control

• HW
  • Independent Learning 1. HTML Essential Training by James Williamson (Sections 1-6).

Day 2: HTML Foundations

HTML, Git Version Control

• HW
  • Exercise 1. Research and Select a Joseph Müller-Brockman poster for Exercise 1. Watch the CSS tutorials, particularly the parts on positioning to start thinking about how to recreate and animate the poster on the web.
  • Independent Learning 2. CSS Essential Training 1 by Christina Truong (Sections 1-4).
  • Independent Learning 3. CSS Essential Training 2 by Christina Truong (Sections 1-4)

Day 3: CSS Foundations

CSS

• HW
  • Exercise 1. Select a Joseph Müller-Brockman poster to recreate DUE MONDAY 1/14. If you want to take a stab at developing a static page of the poster, you can start that this weekend, but all you will need to do for Monday is have a poster selected.
  • Project 1. Styling Lyrics DUE MONDAY 1/14. Post your source code for the project to your Remote GitHub repository.
  • Reading 1. Paul Ford, What is Code? & Frank Chimero, What Screens Want Post a short response to your section's slack channel and be prepared to discuss the readings in class DUE MONDAY 1/14
  • Independent Learning 4. CSS Essential Training 3 by Christina Truong (Sections 1–4).
  • Independent Learning 5. CSS Animation by Val Head (Sections 1-6).
  • If you want extra instruction using git and github, check out Learning Git and Github by Ray Villalobos.

Day 4: Motion and Transformations

Review Project 1. Styling Lyrics, Motion and Transformations Lesson, Develop Joseph Müller-Brockmann Poster Site

• HW
  • Exercise 1. Make and animate your Joseph Müller-Brockmann poster on the web DUE TUESDAY 1/15
  • Independent Learning 7. JavaScript Essential Training by Morten Rand-Hendriksen (Sections 1–3)

Day 5: Basic JavaScript

Basic JavaScript Lesson, Work on Exercise 1. Joseph Müller-Brockmann Poster, Review Exercise 1

• HW
  • Project 2. (De)Design Systems. Pick a web trend to either enhance or subvert using HTML, CSS, and/or JavaScript (full assignment description under the exercises section of class wiki) DUE TUESDAY 1/22
  • Project 3. A Record. Start thinking about a project that incorporates data recorded across a period of time. Begin gathering that data, as well as the media you'll use to help represent that data. Create a wireframe/mockup for BOTH MOBILE and DESKTOP that shows the layout of the site and user interactions. A wireframe would be fine as an initial site plan (as opposed to a total mockup in photoshop or illustrator), however you should also be making considerations about the typefaces you'll use, your color scheme, textures, mood/feel, and any other graphic decisions that will enhance the graphic communication of your data. The goal is to make as many of the design decisions you can before coding your site so you have a good roadmap from which to work. DUE WEDNESDAY 1/23
  • Independent Learning 7. JavaScript Essential Training by Morten Rand-Hendriksen (Sections 4, 5, 7, and 9). You can do the challenge exercises as well in sections 6 and 8 for extra practice, but, those exercises while encouraged, will not be graded.
  • Reading 2. Olia Lialina, Vernacular Web 1 & Alexander R. Galloway, Jodi's Infrastructure

Day 6: JavaScript Objects and Classes

Review Project 2 (De)Design systems, JavaScript Objects lesson

• HW
  • Project 3. A Record. Start thinking about a project that incorporates data recorded across a period of time. Begin gathering that data, as well as the media you'll use to help represent that data. Create a wireframe/mockup for BOTH MOBILE and DESKTOP that shows the layout of the site and user interactions. A wireframe would be fine as an initial site plan (as opposed to a total mockup in photoshop or illustrator), however you should also be making considerations about the typefaces you'll use, your color scheme, textures, mood/feel, and any other graphic decisions that will enhance the graphic communication of your data. The goal is to make as many of the design decisions you can before coding your site so you have a good roadmap from which to work. DUE WEDNESDAY 1/23
  • Independent Learning 8. JavaScript and JSON by Ray Villalobos (Sections 1-4).
  • Independent Learning 9. JavaScript and AJAX by Ray Villalobos (Sections 1-4).

Day 7: JavaScript Objects and Classes

Review Project 3 A Record Design Mockups, JavaScript Objects lesson, JQuery Lesson

• HW
  • Project 3. A Record. DUE MONDAY 1/28
  • Independent Learning 10. JQuery Essential Training by Joe Marini (Sections 1-5).
  • Reading 3. Samuel Earle, Capitalism vs. Privacy & Louise Drulhe, Critical Atlas of Internet

Day 8: Website Planning, Web Tricks

Review Project 3. A Record, Reading Discussions, Website Planning lesson, JQueryUI, Media Queries, Parallax Effect, and Sticky Elements demos

• HW
  • Project 3. A Record. Finish Mobile Version
  • Project 4. Compilation site planning. Create Site Map, Wireframes, and Answer the Following Questions about your Project 4. Compilation Site:
    • Audience:
      • Who do you feel are your site's audiences?
      • What are the demographics of these audiences?
      • How comfortable with technology is this audience?
      • Who else is competing for their attention?
    • Outcomes:
      • What do you want to persuade your audience to do?
      • What assumptions do you make concerning your audiences?
    • Tone and Voice:
      • What message do you need to get across?
      • What is the voice and personality you want to give off?

Day 9: Web Tools and Libraries

Review Project 4. Compilation Website Plans, Web Tools and Libraries lesson, Coding time

• HW
  • FIX UP/FINISH ALL PREVIOUS PROJECTS, EXERCISES, AND READINGS. If you haven't finished certain projects, exercises, or reading responses, now is the time to make sure everything is complete and polished. You'll want everything done as you put together your compilation site. We will be grading your performance for the course based on what's submitted in the compilation site.
  • Project 4. Compilation. Come in with a draft of the desktop or mobile version of your compilation site to be critiqued (if you can do both, even better!). Don't forget to include an about me section for you compilation site, as well as a section for all of the process (wire frames, moodboards, site architectures, mockups etc.) drafts you've created for your sites.
  • Reading 4. New Clues