HTML5 Training Course

Course Summary

HTML5 is everywhere, and is a technology that can no longer be ignored or treated as a mere extension of HTML4.

HTML5 is a vast umbrella term for modern Front End Engineering, namely JavaScript, Markup, DeviceAPIs, and Styles.

Almost anything you see in App Stores can now be created with pure HTML5.

Although we will cover some of the most exciting features of HTML5 such as geolocation, web sockets, local storage, SVG and Canvas, the focus of the course will be to help people understand the core principles and best practices for creating websites and apps.

 

Duration [top]

2 days.

HTML5 is composed of the following:

Objectives [top]

This course is very hands-on and ensures students come away with the skills required to build websites with HTML5.

Audience [top]

The HTML5 training course is a two-day public class that comprises of HTML5 Essentials and HTML5 Fast Track.

Prerequisites [top]

None. Students who have never done any web development before are more than welcome on this course, however be aware that the course moves quickly (especially in day two) so students are expected to be tech-savvy.

Instructors [top]

Photo

Rick has been a freelance software engineer since he graduated in the early 2000's. He has worked in the UK and America both as a freelance consultant and as a freelance developer. He is a very passionate and seasoned full stack developer, specializing in advanced front end user interface(UI) and user experience(UX).

Having worked as lead CSS3/HTML5 developer for a start up in the Bay area, Rick has bleeding edge experience in ensuring extremely complex systems have simple to use and intuitive interfaces.

Having worked with nearly all web technologies over the last decade he believes that there is no one size fits all technology. However, he is an advocate for using open source wherever possible and admittedly has an affinity for curly brackets.

Rick has a passion for CSS and UX. You will also often find him talking about JavaScript being a 'real' language, or that JavaScript on the server is “what the world has been missing”.

Between hitting up Las Vegas on the weekends and playing Magic the Gathering with his other coder friends, Rick is currently developing amongst other apps; a real-time unified social network for the trade show industry based in Las Vegas and a bidding platform for a crowdfunding app based in San Francisco.

More about Rick Hurst...

Outline [top]

HTML5 Essentials Modules   (1 day)

HTML5 Essentials is a beginner course designed to help students gain a base proficiency in HTML5.

Intro to Front End Engineering   (1 hour)

  • Vision for HTML5
  • Mobile web is the web
  • How HTML5 integrates with everything
  • Front End Engineering is not an island
  • Basic Markup

Basic Markup   (1 hour)

  • What is semantic markup, what we dropped from HTML4 and why
  • New Tags in HTML5
  • Doctype and charsets
  • Essential Meta Information
  • Web Developer Tools
  • Overview of the DOM
  • Putting your first HTML5 webpage online
  • Basic Versioning
  • Validating your code, and browser issues
  • Accessibility
  • Basic Selecting and Styling

Basic Selecting and Styling   (1 hour)

  • How to select elements in the DOM with CSS
  • How to manipulate the page using the Cascade
  • Block and Inline elements
  • Floats, positioning, borders, margins, padding and text
  • Understanding the viewport

Basic JavaScript   (1 hour)

  • Variables
  • Arrays
  • Strings
  • Loops
  • If/else and equivalence
  • Object Literals
  • JSON
  • Functions
  • Scope and Hoisting

Intermediate Markup   (1 hour)

  • Effective positioning of your scripts
  • Good uses of the head tag
  • Importing vs linking
  • Anchoring
  • More Meta Tags
  • Inserting Analytics

API Overview   (1 hour)

A high level overview (30,000ft) of all the main APIs and related subjects that make up what we know as HTML5 We will be touching on HTML5 subjects from Canvas and the Application Cache, to Touch Events, Messaging API, Responsive Design, Geolocation and Websockets just to name a few.

HTML5 Fast Track Modules   (1 day)

HTML5 FastTrack is a one-day course for semi-professional developers or graduates from our HTML5 Essentials.

This module is exclusively offered as a part of HTML5 Course.

Intermedia Javascript and jQuery   (1 hour)

  • Using web developer tools Tips for using the console
  • Deeper into the DOM
  • Scope, Private and Public, Callbacks and Nesting, NameSpacing, Using Object Literals, patterns, code execution, and general best practices
  • Jquery, and the 20% you will use 80% of the time
  • Event Handling and Binding Gotchas
  • Intermediate Selecting and Styling

Intermediate Selecting and Styling   (1 hour)

  • Using web developer tools for live styling
  • CSS3 selectors
  • CSS3 properties
  • CSS3 hints and gotchas
  • Custom styles and conditional hacks
  • The 20% of CSS3 that you will use 80% of the time
  • Advanced Markup and SVG

Advanced Markup and SVG   (1 hour)

  • Even more meta tags
  • SEO outlining
  • Microformats
  • Advanced SVG
  • ARIA
  • Device listening (@media)
  • Working with third party fonts
  • Retina versioning
  • Advanced Selecting and Styling

Advanced Selecting and Styling   (1 hour)

  • Gylphs and Font Icons
  • Effective use of multiple background images
  • Gotchas for nth-of and other static selectors
  • Advanced positioning techniques
  • Border gotchas, grids, tables, and flex boxes
  • EMs vs Pixels (pros and cons)
  • Resetting Techniques
  • Optimization
  • CSS3 Fallback best practices
  • Advanced styling with before and after filter injection
  • HTML entities
  • API Code Overview

API Code Overview   (1 hour)

A mid-level overview (500ft) of all the APIs and related subjects that make up what we know as HTML5 We will be covering all the main HTML5 related subjects from Canvas and the Application Cache, to Touch Events Messaging API, Responsive Design, GeoLocation and WebSockets just to name a few This section moves quickly and discusses actual code.