Acclaimed content and teacher — read the Sept. 2013 students’ feedback!
“The course was really, really good. Michel Buffa did a great job.”
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.
The Sept. 13 course edition has been significantly enhanced from the June 2013 course. It features the following new sections:
- The HTML5 canvas has now an advanced additional section dedicated to time based animation, high resolution timer and optional timestamp parameter. Numerous examples are provided so that to explain how to set up the frame rate of an animation, and do time based animation.
- We also added a section that describes in details the 2D geometric transformations that can be used on the canvas element. Lots of examples are also provided.
- We added a complete new section about the Web Audio API, an API which is useful for games or musical applications.
- There are new examples of HTML5 forms together with the File API, the drag’n’drop API and the new XHR2 API that show how to handle HTML5 forms using Ajax, including multiple file uploads methods. Examples includes full source code for client and server side (PHP, Java), showing progress bars during upload, etc.
Finally, on 6 August 2013, the W3C HTML Working Group updated two Candidate Recommendations:
- HTML5, which defines the 5th major revision of the core language of the World Wide Web, the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
- HTML Canvas 2D Context, which defines the 2D Context for the HTML canvas element. The 2D Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.
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
- 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.
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> elements
- 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
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:
- 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 ssignment that will let you draw and animate!
Week 4: HTML5 Forms
- 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,
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 IndexDB database.
- The DOM storage API: local storage and session storage
- The new Cache API: overview and examples
- IndexedDB: overview, basic concepts, working with data, etc.
This week ends with an assignement on persistence.
How do I get a Certificate 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.
Who should attend?
- 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:
What do I need?
Ideally, as well as a desktop or laptop computer, you should have access to:
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.
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.