HTML5 Fundamentals by Craig Shoemaker was one of the first Pluralsight courses I ever watched, but then it was retired and replaced with a fully updated second edition, which I’ve only just got around to watching almost 3 years later. The good news is that HTML5 is now mostly supported by all of the major browsers.

However, there are still several HTML5 features that aren’t yet supported by the latest browsers. See can i use for details.

Craig explains that HTML5 is really two things, new HTML markup, and new JavaScript APIs.

Over 12 minutes, he runs through all of the new markup tags. This is too much information to take in at once, but he later gives examples at a slower pace, so don’t worry!

Next Craig describes all of the new JavaScript APIs:

• Canvas
• Contacts
• File
• Forms
• Geolocation
• IndexedDB
• Media Capture
• Offline Web Applications
• Selection
• Server Sent Events
• Web Notifications
• Web Sockets
• Web Storage
• Web Workers
• XHR Level 2

In the clip “when in HTML5 done”, it’s mentioned that Ian Hickson estimated the year 2022. For further info on this see the WHATWG FAQ

Later on in the introductory module, Craig discusses using Modernizr for detecting HTML5 features.

DOM Selection

In this module, the selection basics clip covers:

document.getElementsByClassName()
document.querySelector()
document.querySelectorAll
element.querySelectorAll

In the following clip, there’s an example that highlights even numbered child elements.

Forms

Here are the new Input Elements:

• color
• datalist (like a dropdown list)
• date (typically a calendar picker)
• datetime (combination of date and time controls)
• datetime-local
• email (typically looks like a textbox)
• month
• number (includes spin buttons)
• range (renders a slider)
• search (typically a textbox with a X button on the right)
• tel (typically looks like a textbox)
• time (typically hours, minutes, AM/PM)
• url (typically looks like a textbox)
• week (choose a week within a year)

There are no requirements as to how these look: each browser manufacturer will render these elements differently.

The email, url, tel and other input types will fallback to standard textboxes if the browser doesn’t understand the markup.

Next there is an example showcasing the placeholder, email, URL, telephone, number, range, datalist, color, date, datetime, time, month and week controls. All of these are shown running in Chrome.

Craig then talks through all of the markup used to create this demo.

Then we see the same demo running in (an old version of) Firefox, and then in Internet Explorer 10 and Opera 12. Some features are supported and others are not. This clip has advice on where to provide fallback options.

Media

This module discusses the native media support available in modern HTML 5 browsers.

There are a number of different native audio formats with different support across browsers: WebM, AAC, WAV, MP3, Ogg Vorbis and Ogg Opus.

Out of these, the AAC and MP3 are the most broadly supported.

Details on supported video format are available on wikipedia, as are details on WebM

Craig shows how to create a fallback experience for browsers that don’t support the HTML5 video element, and shows the Big Buck Bunny video along with the full set of controls and labels: remaining time, total time, play, pause, stop, rewind, fast forward, mute, scrubber and playback rate!

All of the JavaScript that produces this is explained.

James Edwards’s SitePoint article goes into all of the caveats that you need to be aware of with differences in older browsers (from 2013)

Canvas

Canvas is the combination of the HTML 5 canvas element working together with the canvas JavaScript API.

Canvas has a 3D context, but because most people only use the 2D context, Craig only covers the 2D context in this module.

Many of you will be too young to remember the logo turtle, but the lineTo commands that Craig explains are similar imperative code to what millions of kids used to program around 1990. But without the robot.

Also covered here are some examples of simplifying your feature detection with Modernizr.

In the clip on Arcs, Gradients and Text, we start to move beyond ZX Spectrum style graphics into the realms of some artwork that might actually be useful.

This involves quite clever code combining createRadialGradient, addColorStop strokeStyle, fillStyle and the arc function.

In the clip on Scaling and Rotating, we finally get to see the fist pump baby we’ve been waiting for.

Scaling, is one of the reasons why you might want to use canvas. You can that is zooming in and out of the image, or scale only horizontally or vertically. You can also rotate the baby, sorry I mean the canvas!

Craig also explains saving and restoring state, and producing animation.

The magnifier demo that he produced is a great example.

Also covered in this module is Building Charts with Canvas. I recommend using one of the available JavaScript Charting Libraries.

The final demo shows how to extract thumbnail images from a running (Big Buck Bunny) video. This is a glimpse of the full power of the Canvas API: you don’t need to painstakingly code up every image yourself, you can import them!

Drag and Drop

While watching this I found HTML5 demos by Remy Sharp which is well worth checking out, including the drag and drop upload demo.

This module covers all of the drag and drop events. For a good reference on these see Mozilla Developer Network.

Craig talks about support for Drag and Drop being broken in Safari 5.1.7 (which was the latest browser at the time of recording). According to Can I Use, drag and drop is fully supported in Safari 9, and 9.1. This resource also sheds some more light on the problems with Data Transfer Types in Internet Explorer: Even Microsoft Edge (v14) doesn’t fully support the whole Drag and Drop API but it does support Data Transfer Types.

The events in action demo is very useful for seeing how many, and which, events get fired in the course of a drag and drop.

This course ends with a run through the code used for a jQuery based drag and drop module.

Other courses by Craig Shoemaker

All Craig Shoemaker courses

I can recommend the Underscore Fundamentals course if you aren’t yet experienced with Underscore or Lo-Dash. Also see my Underscore and Lodash article.

Craig has also written some articles for Code magazine, such as Introduction to HTML5 and Build an HTML5 Offline Application with Application Cache, Web Storage and ASP.NET MVC