Class Resources List

Here you'll find a list of class resources that will help you through various assignments. Check back as this page will be frequently updated.

Google Maps API and tutorial information

• Using Google Fusion tables to build maps
• Google Maps documentation guide
• Google News Lab reporting tools
• Google Street View resources
• Streetview Embed
• Streetview Embed on Github

Web Philosophy

• A Dao of Web Design
• The Slow Web
• The Web We Have To Save
• Continuum
• Content Display Patterns
• The Long Web

Design Philosophy

• Style Versus Design
• Object-Oriented UX
• Content As Medium
• Web Design: The First 100 Years
• Discourse in Web Design
• How Designers Destroyed the World

##Git and Github References

• Git Tutorials
• Hosting a Website with Github Pages (Treehouse link)
• A Guide to Using Github Pages
• Github Pages (Official Guide)

HTML References

• HTML Tutorial
• HTML tag definitions
• HTML Validator
• Don't Fear the Internet
• Web Platform Docs
• Elements of HTML (from the W3C)
• HTML5 Please
• Dive Into HTML5

CSS References

• Learn Layout
• CSS Font Sizing
• CSS Validator
• Can I still use "px"?
• CSS3 Cheat Sheet
• Vertical Alignment in CSS

Grid References

• CSS Grid Builder
• Grid Calculator
• The Infinite Grid

Image References

• Responsive Image Breakpoints Generator

Flexbox

• Learn Layout: Flexbox
• Flexbox Froggy
• A Complete Guide to Flexbox
• A Visual Guide to CSS3 Flexbox Properties
• Dive Into Flexbox

Typography

• Web Design Is 95% Typography
• Butterick's Practical Typography
• Thinking With Type
• Professional Web Typography
• Type Connection (A Typography Dating Game)
• Jason Santa Maria at AEA: "On Web Typography"
• Why San Francisco, part 1 (type primer)
• Fonts In Use
• A Visual Lexicon

Matters of Size

• The Website Obesity Crisis

Designing With Kindness

• Inadvertent Algorithmic Cruelty
• Well, That Escalated Quickly
• Content For Kindness

Content Blocking

• Content Blocking Primer
• Tab Closed, Didn't Read

Bad Computing

• Programming Sucks
• Everything Is Broken
• The Internet with a Human Face

Design Inspiration

• A Single Div
• The Serengeti Lion
• Borderland
• Dogs of NYC

The Creative Process

• McDonald's Theory

Great Style Guides or Brand Guidelines

• Yelp
• Heroku
• Github
• Apple HIG
• Google Android Guidelines
• Dropbox
• Twitter

Creative Brief Resources:

• UI Names
• UI Faces

Storyboard Resources

• Interface Sketch Templates
• Draw.io sketching website

One-Liners

• If someone from the 1950s suddenly appeared today, what would be the most difficult thing to explain to them about life today?
• Do websites need to look exactly the same in every browser?
• Should I use a carousel?
• How To Pronounce "Gif"