‘—

Various Design and Coding Resources

Class tools:

• Slack
• FTP Client: FileZilla
• Text Editors: Sublime, TextWrangler/BBEdit
• Google Chrome Web Browser
• Codecademy

• HTML Blank Document: html.html

HTML & CSS Tutorials

• Super basic HTML tutorial: www.w3.org/MarkUp/Guide
• HTML / CSS a beginner’s guide: www.sitepoint.com/html-css-beginners-guide
• www.sitepoint.com/xhtml-web-design-beginners-2
• www.sitepoint.com/html-37-steps-perfect-markup
• www.htmldog.com/guides/cssbeginner
• meyerweb.com/eric/css/references/index.html
• CSS Tricks: css-tricks.com
• http://learn.shayhowe.com

Fixed Width Grids

• Khoi Vinh and Mark Boulton’s slides (2007): “Grids are Good (Right?)”
• List of tons of articles and resources (2007): Smashing Magazine Grid Resource
• Smashing Magazine simplified article

Responsive / Fluid Grids

• Chris Coyier’’s simple grid approach
• All List Apart
• Infinite Grid
• Fluid Grids
• Responsive Web

Media Queries & Responsive design

• Responsive Design Media Queries
• 7 Habits of Highly Effective Media Queries
• mediaqueri.es

Type and Typography

• Ellen Lupton’s Thinking with Type
• Matthew Butterick’s Practical Typography
• The em and en-dash article: www.alistapart.com/articles/emen e.g. the em dash (—) & the en dash (–).
• On paragraphs: jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design and jontangerine.com/silo/typography/p/
• Background links on the Font-face syntax and workarounds etc. and Nice Web Type’s @font-face guide
• Ascii Character: www.w3schools.com/tags/ref_ascii.asp
• HTML Entity reference: www.w3schools.com/tags/ref_entities.asp
• Use Font-squirrel’s generator for more robust rules that can be used in production (if you have web rights).
• Webtype
• TypeKit
• Fonts.com
• cloud.typography
• Typecast
• Font Deck
• League of Moveable Type
• Google Web Fonts and a nice selection in use.
• Fontstand

Positioning and Floats

• An excellent Tutorial on Floats: css.maxdesign.com.au/floatutorial
• www.barelyfitz.com/screencast/html-training/css/positioning

Validation and Debugging

• HTML: validator.w3.org Choose “Validate by upload” to upload a file
• CSS: jigsaw.w3.org/css-validator
• Firebug a web development and debugging extension for Firefox:getfirebug.com

The site experience (IA, ID, UX, Usability)

• Information Architecture basics
• Defining an Interaction Model: The cornerstone of application design

Javascript

• jQuery plugin examples (zip)
• JQuery: jquery.com
• JQuery tutorial: www.w3schools.com/jquery/default.asp
• JQuery tutorial for beginners: www.impressivewebs.com/jquery-tutorial-for-beginners
• JQuery tutorial for designers 1: jqueryfordesigners.com
• JQuery tutorial for designers 1: webdesignerwall.com/tutorials/jquery-tutorials-for-designers
• JQuery plugin Lettering.js: letteringjs.com
• PaperJS library: paperjs.org