Course 482:
Web Development with HTML5 and CSS3

(3 days)


Course Description

HTML5 is taking the Web by storm and providing a rich set of features that can be used to build the next generation of Web applications! This new version of HTML provides developers with additional client-side power to enable them to build applications capable of running on desktops, laptops, tablets, and mobile devices. The Web Development with HTML5 and CSS3 course provides students with a hands-on look at key HTML5 technologies that can be used in today’s modern browsers.

Topics covered include integrating HTML semantic tags into your HTML pages to define headers, footers, sections, articles, figures, and more, using the Canvas API to draw dynamic graphics with JavaScript, working with CSS3 features, detecting HTML5 features with Modernizr, using HTML5 Boilerplate as the foundation for new sites, playing audio and video content without relying on plugins, working with geolocation, storing data locally, Web workers, web sockets, plus more. If you’re looking to take advantage of different HTML5 features, this class will get you on the fast track!

Learning Objectives

  • HTML5 semantic tags
  • Drawing with the canvas tag
  • Starting a site with HTML5 boilerplate
  • Key CSS3 features
  • Web workers
  • HTML5 storage options
  • Integrating audio and video
  • Geolocation functionality
  • Web sockets
  • Detecting HTML5/CSS3 features with Modernizr


Attendees should have existing experience working with HTML, JavaScript, and CSS. Many HTML5 technologies rely heavily on JavaScript, so it’s recommended that attendees have at least six months of hands-on JavaScript experience. This is not an introduction to HTML class.

Course Outline

1. Why HTML5 and CSS3?

  • HTML4 and CSS Works – Why Do We Need HTML5 and CSS3?
  • HTML5 Feature Overview
  • Important Tools and Scripts
  • Browser Limitations
  • Looking to the Future – Upcoming HTML5 Technologies

2. Getting Started with HTML5 Boilerplate

  • What Is HTML5 Boilerplate and Why Would I Use It?
  • HTML5 Boilerplate Features
  • Getting Started with HTML5 Boilerplate

3. HTML5 Semantic Tags

  • The Need for Semantic Tags
  • Defining Headers and Footers
  • Defining Sections
  • Defining Articles
  • Defining Figures
  • Defining Navigation

4. Styling HTML5 with CSS3

  • Key CSS3 Features
  • Are There Cross-Browser Limitations?
  • CSS3 Selectors
  • Working with Shadows
  • Defining Gradients
  • Rounding Corners
  • Using Transforms

5. Drawing with Canvas and SVG

  • The Canvas Is All about JavaScript!
  • Canvas Drawing Functions
  • Drawing Lines
  • Drawing Shapes
  • SVG Fundamentals
  • JavaScript Libraries

6. Audio and Video

  • Audio and Video without Plugins?
  • Playing Audio Files
  • Playing Video Files
  • Script Libraries That Will Save You Time!

7. Geolocation

  • Integrating Geolocation into HTML5 Applications
  • Supported Browsers
  • Accessing Longitude, Latitude, and Other Settings
  • Geolocation Script Libraries

8. Local Storage

  • Building a Better Cookie
  • Local Storage API
  • Local Storage Events

9. Web Workers

  • What Are Web Workers?
  • Creating a Web Worker Script
  • Posting Messages

10. Web Sockets

  • The Role of Web Sockets
  • Creating a Socket Server
  • Connecting to a Socket Server from the Client

11. Detecting HTML5 Features with Modernizr

  • What Is Modernizr?
  • Detecting Features with Modernizr
  • Modernizr CSS Classes
  • Detecting HTML5 Features and Using Polyfills

Please Contact Your ROI Representative to Discuss Course Tailoring!