Web Development // HTML205

Web Development with HTML5 and CSS3

Get up-to-speed on this amazing new version of the HTML language and its evolving importance in cutting-edge coding.

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, plus more. If you’re looking to take advantage of different HTML5 features, this class will get you on the fast track!

Audience

This course is intended for developers and anyone who is beginning to work with HTML5 and CSS3.

Prerequisites

​Attendees should have existing experience working with HTML. To get the most out of this class it’s recommended that attendees also have experience working with CSS and JavaScript. This class focuses on HTML5 and CSS3 features. This is not an introduction to HTML class.

Students should have completed the following courses or have equivalent experience:
WEB240: XHTML and CSS In-Depth 
JQ200: jQuery Web Development

What You Will Learn

Upon completion of this course, you will understand:
  • HTML5 semantic tags
  • Drawing with the Canvas tag
  • Detecting HTML5 features with Modernizr
  • Starting a Site with HTML5 Boilerplate
  • An Introduction to key CSS3 Features
  • HTML5 storage options
  • Integrating audio and video without using plugins
  • Geolocation functionality

Course Outline

1. Why do we need HTML5?
  • HTML4 works – why do we need HTML5?
  • 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
    Lab – Creating a Site Foundation with HTML5 Boilerplate

3. HTML5 Semantic Tags 

  • The need for semantic tags
  • Defining headers and footers
  • Defining articles and sections
  • Defining figures
  • Defining navigation
    Lab – Using HTML5 Semantic Tags

4. Styling HTML5 Tags with CSS3

  • Key CSS3 Features
  • CSS3 Selectors
  • Working with shadows
  • Defining Gradients
  • Rounding Corners
  • Using Transforms to spice up pages
    Lab – Using CSS3 Features

5. Drawing with the Canvas

  • Getting Started
  • Drawing lines
  • Drawing shapes
  • Canvas Script Libraries that Will Save you Time
    Lab – Building a Chart using the Canvas

6. Audio and Video

  • Audio and Video without plugins?
  • Playing audio files
  • Playing video files
  • Script libraries that will save you time!
    Lab – Integrating Video into a Website

7. Geolocation

  • Integrating Geolocation into HTML5 applications
  • Supported browsers
  • Accessing Longitude, Latitude and other Settings
  • Geolocation script libraries
    Lab – Working with Geolocation

8. Working with Local Storage 

  • Building a Better Cookie
  • Local Storage API
  • Local Storage Events
    Lab – Storing Data with Local Storage

9. Detecting HTML5 Features with Modernizr (Bonus)

  • What is Modernizr?
  • Detecting features with Modernizr
  • Modernizr CSS Classes
  • Detecting HTML5 Features using JavaScript
    Lab – Integrating Modernizr into a Site