Learn HTML5
HTML5 Live Overview
Lesson 1 Outline
What Exactly is HTML5?
Can I Really Use HTML5 Right Now?
HTML5 Showcase
Join a Discussion: Introduce Yourself!
Lesson 2 Outline
The HTML5 doctype
Declaring Character Encodings in HTML5
Common Page Layout Patterns
Exercise 1 - Marking up a Blog
Plaintext to download and markup
Solution to Exercise 1 (Part I)
Solution to Exercise 1 (Part II)
Join a Discussion: Introduce Yourself!
Lesson 3 Outline
Sectioning in HTML5
Outline algorithms in HTML 4 and HTML5 (Part 1)
Outline algorithms in HTML 4 and HTML5 (Part 2)
Marking Up Dates and Times With HTML5
Marking Up Captions for Figures in HTML5
A short note on the two flavors of HTML5 - XHTML and HTML
Exercise - Completing the HTML5 Document from Lesson 2
Completed Exercise (Part I)
Completed Exercise (Part II)
Download my Worked Example
Lesson 4 Outline
WAI-ARIA and HTML5
Using the Role Attribute
Exercise 4.1 - Mark up a document using ARIA role attributes
Marking up the aforementioned document
Download my Finished Example
HTML 5 Form Elements
Exercise 4.2 - Creating Forms with HTML5
Download the Associated File
Answer to today's exercise
Download my Finished Example
View Session A
View Session B
Lesson 6 Outline
The Video Element
The Audio Element
Complete an exercise: marking up an audio element
Download the ogg file
Download the mp3 file
Creating the Audio Element
Download my Finished Version
Backwards Compatibility
Complete an exercise: marking up a video element, with fallback content
Download the mp4 video file
Download the ogv video file
Download the swf video file
Creating the Video Element
Download my finished version of the video
Video and Audio Codecs
A Note on Accessibility
Lesson 7 Outline
canvas Console
Intro to canvas Console
Introducing the canvas element & Creating Fallback Content
The canvas coordinate system and sizing the canvas
Drawing with Canvas
Drawing with canvas, including filling, stroking and erasing rectangles
Drawing lines and other paths in canvas, including circles
Drawing text with canvas
Shadows and other Advanced canvas
Exercise
Download the 'No Parking' sign
Download the 'Warning' sign
Lesson 8 Outline
Canvas Solutions (Part 1) - Solution to Lesson 7 Canvas Challenge
Canvas Solutions (Part 2)
Dealing with Browser Support (Part 1)
Dealing with Browser Support (Part 2)
Dealing with Browser Support (Part 3)
Dealing with Browser Support (Part 4)
Validating HTML5
Preparing for Lesson 9
Now it's your Turn
Download a page from a site
Download a zip file of all the page elements
View Session A
View Session B
Bonuses