HTML5 Tutorial - Table of contents
By Maria Antonietta Perna
Find out what you can expect to learn from this tutorial and how best to benefit from its lessons.
- Part 1 - Lesson 1: What is HTML5?
Get to know HTML5 and learn about some of its cool features.
- Lesson 2: Your HTML5 Bare Bones Template
Here, you build a minimal HTML5 template that will be the basis for your projects and start learning the new features right away.
- Lesson 3: What about Older Browsers?
Learn how you can start using HTML5 today without dropping support for older browsers like Microsoft Internet Explorer (IE) prior to version 9.
- Part 2 - Lesson 4: Meet Your Sample Web Document
You will start coding a sample web document based on the HTML5 template you built in lessons 2 and 3. It's a 1-page portfolio website that will give you the chance to use a great deal of the new semantic HTML5 elements.
- Lesson 5: The Building Blocks of Your Sample Document
Armed with the goodness of HTML5 semantic elements, you will continue to section up your sample portfolio page.
- Lesson 6: Diving Deeper into Your Document's Markup
In this lesson, you will complete your project of converting our mock design into semantic HTML5 code.
- Lesson 7: Markup Validation and Document Outline
With your mock design almost converted into shiny HTML5 code, you will submit your markup to fantastic online tools to validate your code and preview the document structure.
- Part 3 - Lesson 8: HTML Forms
HTML5 introduces attributes and features specific to forms that make coding forms definitely more interesting. Here we start with the new attributes available to form elements.
- Lesson 9: New Input Elements
HTML5 offers 13 brand new input types for form elements in addition to the already existing ones. In this lesson you will find out more about them and how best to use them.
- Lesson 10: Old Form Elements: Have They Changed?
A brief overview of further HTML5 changes in existing form controls wraps up the part of this tutorial dedicated to HTML forms.
- Lesson 12: Geolocation
- Lesson 13: Web Storage
The web storage programming interface defines a standard on how we can save simple data locally on the user's computer. Let's find out a bit more about how it works by following this lesson.
- Lesson 14: An HTML5 Video Player
- Lesson 15: Draw Shapes On Canvas
- Lesson 16: Draw Lines and Text On Canvas
Continuing on from the previous lesson, you will find out how to draw lines and write text images on an HTML5 canvas element.
- Lesson 17: Load Images On Canvas
In this lesson, you will learn how to load an existing graphic inside the canvas and change its dimensions.
- Lesson 18: Drag and Drop
HTML5 introduces native drag and drop functionality to your page elements. In this final lesson dedicated to HTML5 interactive capabilities, we are going to build a simple drag and drop application.
- Lesson 19: The Final Tips
This is where we are going to recap some of our new additions to our developers' toolbox, and offer some good tips for your future HTML5-powered projects.