HTML5 Training for Web Developers

In this 2 day HTML5 training class, you’ll start by getting your hands dirty and jumping right into HTML5 code.  You’ll learn about the new HTML5 structural, semantic, and form tags, how to use Canvas to create drawings natively in the browser, how to work with HTML5 audio and video, the new methods for storing variables client-side, and how you build applications that work offline.  Along the way, you’ll learn about the current state of browser support for HTML5 and the theory behind all the changes that have been made.

If you are new to HTML, you should take our Introduction to HTML class first. Everything covered in that course is relevant to HTML5 and is prerequisite knowledge for this class.

1. Laying out a Page with HTML5
   1. Page Structure
      1. Laying out a Page with HTML 4 – the “old” way
      2. Laying out a Page with HTML5
   2. New HTML5 Structural Tags
   3. Page Simplification
2. HTML5 – How We Got Here
   1. The Problems HTML 4 Addresses
   2. The Problems XHTML Addresses
   3. The New More Flexible Approach of HTML5 – Paving the Cowpaths
   4. New Features of HTML5
      1. HTML5 and JavaScript
      2. Additional Changes
      3. Modernizr
   5. The HTML5 Spec(s)
   6. Current State of Browser Support
3. Sections and Articles
   1. The section Tag
      1. The HTML 4 Way
      2. The HTML5 Way
      3. Display of HTML5 Structural Elements
   2. The article Tag
   3. Outlining
      1. Sectioning
   4. Accessibility
4. HTML5 Audio and Video
   1. Supported Media Types
   2. The audio Element
      1. Audio Formats
      2. Multiple Sources
      3. Audio Tag Attributes
      4. Getting and Creating Audio Files
   3. The video Element
      1. Video Tag Attributes
      2. Creating and Converting Video Files
   4. Accessibility
   5. Scripting Media Elements
   6. Dealing with Non-Supporting Browsers
      1. Graceful Degradation
5. HTML5 Forms
   1. Modernizr
   2. New Input Types
      1. search
      2. tel
      3. url and email
      4. date/time input types
      5. number
      6. range
      7. min, max, and step attributes
      8. color
   3. HTML5 New Form Attributes
      1. autocomplete
      2. novalidate
   4. Some Other New Form Field Attributes
      1. required
      2. placeholder
      3. autofocus
      4. autocomplete
      5. form
      6. pattern
   5. New Form Elements
      1. datalist
      2. progress and meter
6. HTML5 Web Storage
   1. Overview of HTML5 Web Storage
   2. Web Storage
      1. Browser Support
      2. Local Storage
      3. Session Storage
      4. Prefixing your Keys
   3. Other Storage Methods
      1. Web Database Storage
      2. Indexed Database API
7. HTML5 Canvas
   1. Getting Started with Canvas
      1. Context
   2. Drawing Lines
      1. Multiple Sub-Paths
      2. The Path Drawing Process
      3. The fill() Method
   3. Color and Transparency
   4. Rectangles
   5. Circles and Arcs
      1. Radians
   6. Quadratic and Bezier Curves
      1. Practice
   7. Images
      1. drawImage() – Basic
      2. drawImage() – Sprites
   8. Text
      1. Text Properties
8. Integrated APIs
   1. Offline Application API
      1. Cache Manifest File
      2. The HTML File
      3. Managing ApplicationCache with JavaScript
      4. A Sample Application
   2. Drag and Drop API