Class 1: Welcome!
The Plan
Lecture: Intros, Syllabus, and whatnot
- Hi!
- Teaching Approach
- Self teaching, tutorials
- Learning what you need to know
- Pair programming
- Syllabus and stuff
- This site, what we’ll cover
- Course work (read through info page)
- Grading
Exercise: Hack!
Download this. We’ll get started together, then I’ll pair you up and you’ll hack away.
Break!
Lecture: UI + Prototyping in Code
- UI vs. UX Didn’t get to this so much - will address in Class 2
- Prototyping
- Why in code?
- A look at Instacart
- Check out processes are a good example: Task Rabbit
- Some real world examples (mostly by me) - they are ugly, it’s about the layout!
- Brad Frost’s Foodbank prototype
- Bearded’s HTML wires for AAH, see this article.
- My DiJiFi prototype
- Onlyinpgh - defunct startup I was in (these were from when gradients were more popular, don’t judge!).
- Fly Solo prototype - created in 20mins this morning!
- Mr. Bottles - from an assignment for a site redesign, focus on content.
Exercise: Continue hacking
For Next Time…
Readings:
This is a lot of reading - you don’t need to read every word of these, but familiarize yourself with the terms Progressive Enhancement and separation of concerns. These topics have been around of a while, but in the age of webapps, they are very hot topics.
Some background:
- Dao of Web Design - from 2000?! This one’s a classic.
- Why You Should Include Your Developer in the Design Process
Progressive enhancement and the ‘separation of concerns’:
- On Progressive Enhancement - by me!
- Understanding Progressive Enhancement
- Progressive Enhancement: It’s About the Content
- Websites vs. Webapps - CSS-Tricks
To do:
- Lesson 2: Getting to Know HTML (tutorial)
- Lesson 3: Getting to Know CSS (tutorial)
- Look through the Links section of this site. Download all required software (listed here).
- Continue working in Welcome files (optional)