HTML5 & CSS3 Book

Setup & Introduction

Downloading the Class Files

Introducing HTML5

Before You Begin

• Required software
• Recommended software

Section 1

Setting Up: Do This Before Other Exercises!

• Setting up your class files

Intro to HTML5 Semantic Elements

• HTML5’s streamlined doctype
• The outline algorithm
• The header, nav, aside, & footer elements
• Article vs. section
• The main element
• The figure & figcaption elements
• Validation

Styling the New Elements

• The simplified style tag
• The child selector

HTML5 Enabling Script (Shiv)

• X-UA-compatible meta tag
• Using the HTML5 enabling script (shiv) for Internet Explorer
• Setting new semantic elements’ display to block

Section 2

Setting Up SolarFlare

• HTML5 sectioning overview
• Using HTML5 Boilerplate
• Using divs for presentation

Getting Started with CSS3

• Rounded corners with border-radius
• Drop shadows with box-shadow
• The CSS3 gradient stack
• Using the IE filter for gradients

CSS3 Multiple Backgrounds

• Working with multiple backgrounds
• Combining CSS3 gradients with multiple backgrounds
• Using HTML5 Boilerplate’s helper class .oldie

Using the RGBA Color Model & Modernizr

• Using RGBA for backgrounds
• Using Modernizr

Section 3

RGBA for Gradients & Shadows

• RGBA for gradients
• RGBA for box shadow & text shadow

CSS Opacity Rollovers

• Setting the opacity of elements
• Changing opacity on hover
• Refining styles for navigation

CSS Transitions

• Transition-property
• Transition-duration
• Transition shorthand & the transition stack

CSS Transforms & Transitions

• The scale transform
• The rotation transform
• Modifying the transform origin
• Transitioning transforms

@Keyframe

• Using CSS @keyframes
• Animation-name
• Animation-duration
• Animation-timing-function
• Hail, Ceaser! a CSS easing animation tool

Section 4

HTML5 Forms

• The placeholder attribute
• The required attribute
• New input types: email
• Using attribute selectors
• The pattern attribute & regular expressions
• Client side validation—no JavaScript necessary

Adding Rich Media: Audio

• The audio element
• Autoplay & controls
• The source attribute
• MP3 vs. Ogg Vorbis
• Using a JavaScript polyfill for IE 8

Adding Rich Media: Video

• The video element
• Autoplay & controls
• The source attribute
• Theora Video vs. H.264 encoding
• Using a JavaScript polyfill for IE 8

Bonus Material

CSS Columns & CSS Reflections

• The column-count property
• The column-gap & column-rules
• Column-span support
• CSS reflections for Webkit browsers
• Modernizr fallbacks

Advanced CSS Selectors

• Adjacent sibling selectors
• Pseudo-class selectors
• Attribute selectors

Reference Material

HTML5 & CSS3 Reference Links