W3C HTML5 Training

Learn HTML5 and start writing for the Open Web

HTML5 is the specification that defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.

This W3C HTML5 training course will let you know about all the new features that were introduced to help Web site authors to create great Web sites, in a simplified but powerful way. HTML5 is here to stay!

With this W3C HTML5 online training course, Web developers and designers will be able to test their new skills through numerous interactive  exercises and four practical assignments.

Latest news: On 28 October 2014, the W3C announced HTML5 as Web standard! Read this enthusiast blog post.

Why attend?

This HTML5 course covers all techniques you need to know for writing great Web pages and apps, including:

• New HTML5 semantic and structuring elements
• HTML5 multimedia: audio and video
• Drawing, animating graphics with the Canvas element, interactions with video
• HTML5 Forms
• JavaScript APIs: DOM, geolocation, orientation
• Persistence: Dom storage, cache, indexedDB

This course runs for 6 weeks. Each week, a new chapter will be revealed (most of the time together with an assignment), and you will get a chance to interact continuously with the teacher and fellow students about the course’s content via the course’s forum of discussion.

Please check out the sections “Who Should Attend?” and “What do I need?” below to find out about the target audience and pre-requisites for this course.

You will need to spend around 6-8 hours per week on the course. Some weeks are busier than others and may require more time but 7 hours should be the average.

DURING THIS COURSE YOU WILL:

• Learn the new simplified HTML5 tags
• Play with the audio and video tags
• Draw and animate fun Web graphics
• Discover the newest HTML5 forms features
• Test the geolocation, orientation APIs and much more
• Understand the HTML5 offline features

Course Outline

Week 1: HTML5 introduction, new structuring and semantic elements

We start this course by explaining and showing what are the new structuring and semantic tags defined in HTML5. We will particularly look at:

• New structuring elements, generating documents’ outlines, etc.
• Other elements that add semantics (time, summary, details, mark, etc.)
• New attributes: data-*, download, translate, etc.
• Microdata and the Microdata API

This week ends with an assignment that will allow students to put into practice the new HTML5 structuring and semantic tags.

Week 2: HTML5 Multimedia video and audio

The objective of this week’s course material is to make students familiar enough with HTML5 media and its capabilities that they will use and manipulate in their Web pages and applications. Many examples will be provided. We will mainly look at:

• Overview of the state of the art in audio and video before HTML5
• The video element: how to use, attributes, codec support, etc.
• The video element DOM API: properties, methods, events
• CSS3 and the video element: transformations, image filters, etc.
• Video and Canvas interactions: take a snapshot, modify in real time the video content, video incrustation, etc.
• Live video stream: the getUsermedia API (webcam control)
• Adding subtitles with the track element
• The audio element: overview, attributes, codec support, etc.
• The audio element DOM API: properties, methods, events – again with many examples provided
• Introduction to the Web Audio API (for real time audio, games, Web applications for musicians)

Week 3: Drawing and Animating Graphics with HTML5 Canvas

The “canvas” tag is one of the “Flash killer” features of HTML5. During this week, we focus on the fundamental drawing capabilities offered by the HTML5 Canvas. This content material notably covers the following:

• Basic usage, quick start with the Canvas JavaScript API
• Drawing lines, arcs, paths, curves, images
• Colors, gradients, patterns, shadows, and setting up other drawing attributes
• Drawing images, images from videos in real time, clipping
• Advanced techniques: geometric transformations, saving and restoring contexts
• Pixel level control of the canvas content, drawing modes, etc.
• Stacking canvas in layers, canvas events, animating canvas content

This week ends with an assignment that will let you draw and animate!

Week 4: HTML5 Forms

This week, we will look at HTML5 forms. Forms did not go through any improvement since 1997. HTML5 brings 13 new types of input fields, attributes, and other elements related to forms as well as a new JavaScript validation API. We will look at all of these features in this section of the course:

• New input types: color, date, range, etc.
• New attributes: required, pattern, placeholder, formnovalidate, etc.
• New elements related to forms: datalist, output, meter, progress, etc.
• Validation: CSS pseudo classes for visual feedback, form validation API, etc.

Week 5: HTML5 New APIs – DOM API, geolocation, WebWorkers, orientation and deviceMotion APIs

This week, we will introduce several new APIs that are not necessarily associated to any particular HTML5 element. They are:

• The DOM API, which has been extended and updated with the new getElementsByClassName, querySelector, querySelectorAll and matches methods, the classlist interface, etc.,
• The new geolocation API implemented by most modern Web browsers. Location data is collected in different ways: GPS, GSM/3G triangulation, Wifi, IP address, etc.,
• The orientation and deviceMotion APIs that are targeted to mobile devices,
• The WebWorker API for adding multi-threading to the JavaScript in HTML5 Web applications.

This week ends with an assignment that allows to put into practice the HTML5 forms and geolocation API.

Week 6: Drag’n’Drop and Persistence

During the final week of this course, we will address the drag’n’drop API that is often used in conjonction with the File API. We will also look at other persistence APIs such as Local Storage, Session Storage, cache API and the IndexedDB database.

How do I get a certificate and a badge of completion?

The course includes 4 practical tutor-marked assignments (TMAs) that all need to be completed satisfactorily if you want to receive a certificate of completion and a badge*.

* What is a badge? A digital badge is an online representation of a skill you’ve earned. Using Mozilla’s Open Badges infrastructure, W3DevCampus issues badges backed by our own seal of approval. Learners can then collect badges from different W3C courses and display them across the Web — on their resumes, Web sites, social networking profiles, job sites and more. Create your backpack and start collecting badges from W3C Training.

Who should attend?

[Intermediate and advanced levels]

• Web developers and content authors ready to update their skills with HTML5
• Web designers
• Mobile Web developers
• Beginning to intermediate programmers with basic Web knowledge who want to learn new skills

Why HTML5 is worth your time? Because:

• HTML5, CSS and JavaScript are the “classic three” for developers and designers
• HTML5 is really HTML + new elements and attributes + many JavaScript APIs + CSS3

What do I need?

Ideally, as well as a desktop or laptop computer, you should have access to:

• A text editor (for HTML, CSS, Javascript). We recommend using your favorite one but the author of this course likes the “sublime text” editor.
• Facilities for putting documents online. Most of the examples from this course are hosted on the http://jsbin.com Web site,  an online HTML/CSS/JavaScript IDE you can use to test/develop/host small webapps. You can use this service for publishing most of the assignements you will be asked for in this course.  (Or you may use other online IDEs such as http://jsfiddle.net).
  Or you can use any other kind of hosting service. We recommend you consider using one of the many free web hosting services available such as x10hosting and Free Web Hosting Area (there are many others to choose from too). These are limited accounts (they’re free!) but they should allow you sufficient flexibility to complete the course.

You also need to be familiar with:

• HTML: just be comfortable putting together an HTML document, assigning IDs and classes, and other such basic tasks.
• CSS: in this course, minimal familiarity with CSS is asked – no need to be an able graphics designer.
• DOM: extensive knowledge of the DOM is not necessary, but the ability to work with some of its more basic methods (getElementById, appendChild, etc.) is required.
• JavaScript: basic knowledge is sufficient, such as how to embed some JS code in a Web page, how to handle events, and how to do some basic DOM processing. Note that we have included a JavaScript crash course in the new September 2013 course.

For more information, see How does this work?

Terms and Conditions

• W3C will deliver the course in line with the published description for the advertised fee.
• Payment must be made, in full, at the time of registration.
• Payment is processed using either a credit card or a PayPal account.
• Refunds will only be made if the participant withdraws up until the end of the first week of the online course.
• W3C intends to continue to make the course material available to registered participants for at least 2 months after the course has ended.
• All material, including that produced by participants, in assignments and correspondence is copyrighted property and cannot be copied, duplicated, posted on another Web site, or otherwise used without the original author’s consent. Conversations and posted messages are private and cannot be copied, duplicated, forwarded, or conveyed to anyone else without the original author’s permission.