_____        ___             ___           _____             __  _            
 / ___/__  ___/ (_)__  ___ _  / _/__  ____  / ___/______ ___ _/ /_(_)  _____ ___
/ /__/ _ \/ _  / / _ \/ _ `/ / _/ _ \/ __/ / /__/ __/ -_) _ `/ __/ / |/ / -_|_-<
\___/\___/\_,_/_/_//_/\_, / /_/ \___/_/    \___/_/  \__/\_,_/\__/_/|___/\__/___/
                     /___/                                                                                                         

A 10 week course introducing students to basic coding skills and how to work with coders within an advertising agency or organization.

Info

• Instructor: Jiashan Wu. Email: [email protected]
• Class Schedule: Tuesdays, 7 - 10pm
• Sign up for the mailing list
• Google drive

Grading

Grades will be determined according to the following breakdowns:

• 35% Assignments
• 35% Class Participation
• 20% Final Project
• 10% Presentation

Assignments & Presentations

• Assignments by week
• Group presentation schedule

Resources

All resources

Week by week

• Rough Syllabus

Week 1 (1/3)

• Introductions
• Syllabus review & expectations
• Technologies past, present and future
• Overview of computers and the internet
  • input/process/memory/output (CPU & memory)
  • Software and hardware
  • Operating system, programs/apps
  • Terminal/command line
  • Client, server and browser
• Assignment 0 review (HTML Q&A)
• In-class setup demonstration
  • Using Github via the command line

Week 1 slides / Week 1 Assignment

---

Week 2 (1/10)

• Assignment review
  • More on Github/terminal
  • HTML/CSS Q&A
• Reading discussion
• More on the internet
  • Networks
    • HTTP/DNS
    • TCP/IP
    • Security
• Web development overview
  • Front end vs. back end development
  • Local vs. cloud hosting/services
  • Pages with Github
• Working with developers
  • Phases: dev, staging, live
  • What is open source code
• In class work session

Week 2 slides / Week 2 Assignment

---

Week 3 (1/21 - make up class)

• Assignment review
  • HTML/CSS review
• Reading discussion
• Creative browser experiments
  • Chrome Experiments
  • Codedoodles
  • Creative coding JavaScript libraries
    • p5.js
    • three.js
    • paper.js
• What is Document Object Model (Q&As)
• More CSS & introduction to Bootstrap (CSS)
  • Bootstrap CSS example code
• Using simpleHTTPserver

Week 3 Assignment

---

Week 4 (1/24)

• Guest speaker
• Assignment review
• DOM & HTML Review (head, body)
  • Organizing your code
  • Browser developer tool
• What is an algorithm
  • Class exercise: break a problem into a set of instructions
  • Fundamentals of programming
• Introduction to JavaScript
  • Brief introduction to programming languages
    • Syntax
      • JS Syntax
  • Evolution of JavaScript: front end to back end
  • Front end JavaScript
  • Examples
• Introduction to p5.js
  • What is JS library
  • What is canvas
  • p5.js examples and p5.js mobile examples
  • Setting up your files (HTML & sketch.js)
  • intro to variables, functions, and JS objects
    • setup() and draw() (flow)
    • events: mousePressed()
• Assign groups for presentation (starting Week 6)

Week 4 slides / Week 4 Assignment: Start early! It'll take time to get through the tutorial videos and the coding assignment.

---

Week 5 (1/31)

• Assignment review
• Programming concepts (using p5.js)
  • Review (Q&A)
  • Animation
    • mouseX/mouseY
    • random(), map(), translate(), rotate(), scale()
    • push(), pop()
  • Booleans
  • Conditionals
  • Iterations: for and while loop
• Debugging
  • console.log()
• Talk about final project & group presentations

Week 5 slides / Week 5 Assignment: Start early! It'll take time to get through the tutorial videos and the coding assignment.

---

Week 6 (2/7)

• Assignment review
• Programming concepts (using p5.js)
  • Review (Q&A)
  • Functions
  • Arrays
  • Object oriented programming overview
  • Objects
    • Classes
    • Constructors
• Creative tech overview
  • Group presentation
  • How it works
• Go over final project ideas
• More browser based inspirations

Week 6 slides / Week 6 Assignment

• Finalize your final project idea

---

Week 7 (2/14)

• Assignment review
  • JS review (functions, objects, etc.)
• Present final project idea
• Creative tech overview
  • Group presentation

Start working on final project. Present progress (updated sketches/mockups and code) next week.

---

Week 8 (2/21)

• Guest speaker
• Present final project sketches/mockups or code
• Creative tech overview
  • Group presentation

Continue working on final project. Push project code to a new Final folder in your Coding-for-creatives-class repository. Present progress next week.

---

Week 9 (2/28)

• Hosting your web site (w/github pages)
• Go over final project
  • In class work time

Assignment

• Continue working on final project. Push project code to a new Final folder in your Coding-for-creatives-class repository. Be ready for your final presentation next week.
  • Optional: host your sketch/site with Github pages
• Sign up for your one-on-one review (I emailed a link to our Google Group)

---

Week 10 (3/7)

• Guest speaker
• Group presentation
• Final project presentations
• All resources