30+ Useful HTML5 Tutorials For Web Designers

Earth-icon Although Adobe Announced Dreamweaver CS5 HTML5 Pack Preview Download Available some weeks ago, as most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. HTML 5 is aimed to create a comprehensive and all-in-one markup language for front-end development, able to provide a qualitative information on the different elements of the page.Below are over 30 useful tutorials to get you started with HTML 5.

Blowing up HTML5 video and mapping it into 3D space


I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. One of those is the Canvas.drawImage() api call. Here is the description on the draft site.

Blowing up HTML5 video and mapping it into 3D space

 

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


HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

Code a Backwards Compatible One Page Portfolio with HTML5 and CSS3

 

Coding A HTML 5 Layout From Scratch


With this article 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 alongside a rising technology: Microformats.
  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

Coding A HTML 5 Layout From Scratch

 

Coding a CSS3 & HTML5 One-Page Website Template


This tutorial introduces how to make a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template.

Coding a CSS3 HTML5 One-Page Website Template

 

Comprehensive video tutorial on HTML5


This is a video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5.

Comprehensive video tutorial on HTML5

 

Create modern Web sites using HTML5 and CSS3


This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table.

Finally, it will show you how to develop a sample Web page that harnesses many of these new features. By the time you have finished this tutorial, you will be ready to build Web sites or applications of your own that are powered by HTML5 and CSS3.

Create modern Web sites using HTML5 and CSS3

 

Designing a blog with html5


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.

Designing a blog with html5

 

 

Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices


In today’s post, we would like to showcase some of the best blogs and websites in the industry built with HTML5+CSS3. At the end of the post we would like you to check out detailed write-ups and tutorials that aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. Let’s get started marking up the blog page.

Designing for the Future with HTML5 CSS3 Tutorials and Best Practices

 

Design & Code a Cool iPhone App Website in HTML5


HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial 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.

Design  Code a Cool iPhone App Website in HTML5

 

Have a Field Day with HTML5 Forms


Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Have a Field Day with HTML5 Forms

 

How To Create A Nice Blog Design Touching The Future


HTML 5 borns to improve interoperability and to reduce development costs for websites and web applications. It is not a W3C recommendation yet, and for this reason you have to read information contained in the article like a simple overview on how we might work with new technologies in the (next) future.

During the introduction I’ve described a scenario in which we don’t need Photoshop to make a good work and create a nice web design. It’s possible, but the initial steps are very important in this case. You need to focus and formalize the requests of the client and create a good plan to work directly with the code.

How To Create A Nice Blog Design Touching The Future

 

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


HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, 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. Yes, even IE 6.

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

 

How to Make an HTML5 iPhone App


This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers.

I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do.

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation.

You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

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

How to Make an HTML5 iPhone App

 

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.

HTML 5 and CSS 3 The Techniques Youll Soon Be Using

 

HTML5 for Beginners. Use it now, its easy!


Ok, so there are a lot of articles out there on HTML5, especially since Google Wave arrived (because it’s the first major app to run on the language), but all the information that you need to know in order to start using it now is either too complicated, or spread out over various websites / articles / tutorials. Hopefully in this article we’ll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.

HTML5 for Beginners Use it now its easy

 

HTML5 Presentation


This presentation tells about history and basic features of HTML5.

HTML5 Presentation

 

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. Not all web browsers support CSS2.1, not all visitors are using software capable of using JavaScript but that doesn’t stop us from using it and it shouldn’t stop you using HTML5 either, and here’s why…

HTML5 Tutorial Getting Started

 

How to Build Web Pages With HTML 5


This tutorial introduces the different about HTML 5, a doctype anyone can remember and semantic structure of HTML 5.

How to Build Web Pages With HTML 5

 

Simple Website Layout Tutorial Using HTML 5 and CSS 3


The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :

  • <header> = Header (Head area of the site)
  • <nav> = Navigation (Menu/Navigation Area)
  • <footer> = Footer Area
  • <aside> = An area on a side (Side Bar)

We will make a very very Simple web page with HTML 5 and styling with CSS 3. This is how the final result will look like :

Simple Website Layout Tutorial Using HTML 5 and CSS 3

 

Structural Tags in HTML5


The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.

Structural Tags in HTML5

 

HTML5 Boilerplates


A quick guide to some boilerplates supported right now.

Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.

HTML5 Boilerplates

 

HTML 5 canvas – the basics


It’s a complete guide to using the canvas element in HTML 5.

The HTML 5 specification includes lots of new features, one of which is the canvas element. HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a "context" (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.

HTML 5 canvas the basics

 

HTML 5 Tutorials


You can find some HTML 5 tutorials and examples here.

HTML 5 Tutorials 

 

Implementing HTML5 Drag and Drop: New Premium Tutorial


It’s a premium tutorial.

One of the new features in HTML5 is native drag and drop. Surprisingly, Internet Explorer has had support for this since version 5.5; in fact, the HTML5 implementation is based on IE’s support. In this week’s Premium tutorial and screencast, we’ll look at how to implement native drag and drop to build a simple shopping cart interface.

Implementing HTML5 Drag and Drop New Premium Tutorial

 

Preview of HTML 5


It’s an older article from A List Apart offering some information on the features and advantages of HTML 5.

Preview of HTML 5

 

The HTML 5 Canvas For Flash Developers : Drawing


After a week where confusion about the future of the Flash platform has been piled on to developers by moves outside their control, we present the second in our series of HTML 5 Canvas for Flash Developers.  We call these tutorials, but really they are more like explorations.  We are learning this thing at the same time you are learning it.  hopefully these will be beneficial in the long run.

htm5canv

The Power of HTML 5 and CSS 3


A good overview of the possibilities when combining HTML 5 and CSS3.

As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

The Power of HTML 5 and CSS 3

 

View Source Tutorial: Sticky Notes With HTML5 and CSS3


View Source is a new series where we crack open cool web sites and applications and detail how they were made, step by step.Today we will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support, In this demo you can create new sticky notes that persist themselves into the local SQL storage and can be accessed while offline. When a sticky note is closed it ‘swooshes’ offscreen with a nice animated effect.

View Source Tutorial Sticky Notes With HTML5 and CSS3

 

webOS HTML5 Database Storage Tutorial


With the release of Chapter 1 of Palm webOS by O’Reilly, Palm has confirmed that local storage will indeed be handled by HTML5′s new local storage functionality.

If you haven’t been able to find any tutorials on HTML5′s storage capability, you’re not alone.  After looking around, we realized that the HTML5 spec is still at such an early revision that there are few resources out there that describe how it should be used.  But with a little digging, we found this excellent little HTML5 database application over at webkit.org.  We eagerly grabbed the source code, deconstructed it, and we’re proud to bring you the first webOS / HTML5 database storage tutorial!

webOS HTML5 Database Storage Tutorial  

 

 

Yes, You Can Use HTML 5 Today!


It’s a guide to some of the currently-supported HTML 5 features and some who are currently using it. Very useful for beginners.

The reason that opinion is so divided is that HTML 5 is more than just a markup syntax for documents, like HTML 4 is. One clue is in the working group’s original name, before it was brought into the W3C camp: Web Hypertext Application Technology Working Group. The original goal for HTML 5 was to make it easier to develop Web applications. There’s evidence of this in the rash of new JavaScript APIs and support for offline development, some of which are already available in a browser near you.

Yes You Can Use HTML 5 Today

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

6 Responses to “30+ Useful HTML5 Tutorials For Web Designers”

  1. Designer says:

    Good collection. Here is another very comprehensive article on w3avenue: http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/

  2. Alexei says:

    Nice list, even though most of the articles cover the markup and CSS parts. Here’s a DOM storage tutorial for those who care to store stuff in the browser ;)

  3. [...] }); }In previous article 30+ Useful HTML5 Tutorials For Web Designers, we have showed you how to create HTML5.  You have probably seen a bunch of tutorials or [...]

  4. Thanks for sharing this fantastic html5 samples, html5 and css3 realy touch the top steps

Leave a Reply