Design

• Dochub.io

Basics

• HTML
• CSS (2010 snapshot)

• Mozilla Developer Network
• Introduction to The Web Standards Curriculum - opera
• Web Education Community Group Wiki - w3c
  • Floats and clearing

HTML5

Page outlines

• http://oli.jp/2008/html5-class-cheatsheet/

CSS

tag
.class
#id

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally

float - floats element next to containing box or other floated element

position: absolute - out of flow

• Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough

Tips

• http://paulirish.com/2012/box-sizing-border-box-ftw/ [1]

Resets, etc.

• https://github.com/necolas/normalize.css/wiki [2]

• http://html5boilerplate.com/docs/css/

Grid

• http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
• http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/

Vertical rhythm

• http://24ways.org/2006/compose-to-a-vertical-rhythm

• https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it)

Typography

• CSS with vertical rhythm - drewish.com
• Scale & Rhythm

Header, footer

• http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height

Menus

• http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu

Gradients

• ColorZilla Ultimate CSS Gradient Generator

Accessibility

Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [3]