14 Of The Best HTML5 Tutorials

July 27, 2010 — 1 Comment

Even though HTML5 is not fully supported in major browsers, web designers and developers are learning new capabilities that were a pipe dream with previous versions of HTML.

Web pages will now be more semantic with the use of structure specific tags and visual elements like rounded corners are now built-in. So is the ability to create drag and drop interactivity and there are also those who are pushing forward and experimenting with its new features. Today you will find a collection of 14 of the best HTML5 tutorials on the internet.

1. Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.

2. Design & Code a Cool iPhone App Website in HTML5

We’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

3. Coding A HTML 5 Layout From Scratch

So today we’re going to experiment a little with these new technologies. At the end you’ll learn how to

  • Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
  • Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
  • Use HTML5 along a rising technology: Microformats.
  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

4. How to Make All Browsers Render HTML5 Mark-up Correctly Even IE6

We’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer.

5. How to Make an HTML5 iPhone App

In this tutorial you will learn how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game

6. Have a Field Day with HTML5 Forms

We’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques

7. Designing a blog with HMTL5

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

8. How to Draw with HTML 5 Canvas

We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links

9. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along

10. HTML5 Tutorial – Getting Started

HTML5 is coming quicker than a lot of web designers are probably aware. You’ve probably seen the stories that it won’t actually be usable until 2022 but in reality, you can actually start using it today.

11. Building Web Pages With HTML 5

To help make some sense of what’s new in HTML 5 today, we’re going to dive right in and start using some of the new structural elements.

12. Sticky Notes With HTML5 and CSS3

Today we will take a look at the Web-kit Sticky Notes demo that was created when Web-kit first landed it’s HTML 5 SQL storage support.

13. Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery

In this tutorial you will going to be tackle building a live news blogging system. There will be multiple administrators who can add, delete and edit news.

14. Create An Elegant Website With HTML 5 & CSS3


The aim is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer).

About these ads

Trackbacks and Pingbacks:

  1. 250+ HTML5 Tutorials. Roundup from DesignFloat | DesignFloat Blog - December 18, 2010

    […] 14 Of The Best HTML5 Tutorials […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s