The Ultimate Collection of HTML5 Tutorials and Techniques

written by aext on August 30, 2011 in Tutorials and CSS & HTML with 3 comments

← older posts newer posts →

From the time when HTML5 was introduced in the market, web masters and internet marketers are extensively using it as compared to the previous versions of HTML. With the launch of HTML5, there comes dozen of tutorials to guide you on how to make the most of HTML5.

In this roundup, we have collected top most wanted tutorials that let you master your HTML5 skills. With this collection, we are aimed to help you achieve good command over HTML5. Enjoy!

How to Build Cross-Browser HTML5 Form

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

How to Make an HTML5 iPhone App

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.

Implementing HTML5 Drag and Drop

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 tutorial and screencast, we’ll look at how to implement native drag and drop to build a simple shopping cart interface.

Building a live news blogging system in PHP, Spiced with HTML5

In this detailed tutorial author will show you how to build a news website in HTML5 and CSS3.

HTML5 and CSS3 Without Guilt

Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.

Coding A HTML 5 Layout From Scratch

At the end of 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.

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.

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 they listed.

Coding Up a Web Design Concept into HTML & CSS

In this walkthrough we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

The Power of HTML 5

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. 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.

HTML5 Geolocation Tutorial

At the heart of every location-based application is positioning and geolocation. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app!

Create offline Web applications on mobile devices with HTML5

In this tutorial you will learn how to create offline web applications on mobile devices with HTML5.

When Can I Use

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

HTML5 for Beginners. Use it now, its easy!

This article will teach you some of the HTML5 basics in a funny way.

Creating an Animated 404 Page

In this tutorial We are going to create an animated 404 page, which you can easily customize and improve.

One page website template

In this tutorial we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in.

Hybrid Column Layout

Have you done a website with fixed columns? … Easy, right? What about one with liquid columns? you know, those that use percentages… easy too. Have you ever mixed them up? If so, Did you have problems? I bet you did…

Design & Code a Cool iPhone App Website in HTML5

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.

Have a Field Day with HTML5 Forms

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.

Code a Vibrant Professional Web Design with HTML5/CSS3

In this web design tutorial, we will convert the vibrant and professional design. We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Bouncing a Ball Around with HTML5 and JavaScript

This guide will explore the use of HTML5’s canvas element through a fun example: bouncing a blue ball around.

HTML5 Canvas Element Guide

In this guide, I hope to get you started on understanding the canvas element and what kinds of things are required and expected in its associated code. This should help you get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique HTML5 element.

Blowing up HTML5 video

The tutorial is about blowing up HTML5 video and mapping it into 3D space.

Comprehensive video tutorial on HTML5

This is a video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5. This is for the people who don’t find time to keep up with HTML5 developments by reading up articles.

Creating an ad in HTML5

HTML5 is an evolving standard competing with Flash for next generation web technologies. One of the prominent usage of Flash is animated and interactive advertisements. Apple showcased iAds, which are supposed to be HTML5 based interactive (and emotional) advertisements. In this tutorial, we will show you a simple way of creating a Google-like (flash-like) advertisement with HTML5.

Another HTML5 Tutorial from Brad Neuberg

Brad Neuberg, a Google Employee, explains why HTML5 matters – to consumers as well as developers! His overview of HTML5 included SVG/Canvas rendering, CSS transforms, app-cache, local databases, web workers, and much more. He also identified the scope and practical implications of the changes that are coming along with HTML5 support in modern browsers.

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.

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

In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3. Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer.

How to Draw with HTML 5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.

The video element

The video element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

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 will 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.

Rethinking Forms in HTML5

While there are many changes for the better in the HTML5 specification, there is no better bang for the buck for the data driven website than the transformation of forms. These simple changes will transform how you enter, validate, process, and even display inputs. You will be able to create more usable web applications with less code and less confusion.

webOS HTML5 Database Storage Tutorial

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, author found this excellent little HTML5 database application over at webkit.org. And he is proud to bring you the first webOS / HTML5 database storage tutorial.

The Official Guide to HTML5 Boilerplate

In this screencast, Paul Irish meticulously reviews each page, and then further goes on to explain why and when you would use each snippet in your projects. The product of years of learning, this video is not to be missed! Even if you have no intention of using this template, you’ll still learn an array of helpful techniques.

Combining Modern CSS3 and HTML5 Techniques

Just because some techniques don’t work in decade old browsers doesn’t mean that you shouldn’t be learning everything you can! Stay on the cutting edge, as we use everything from CSS shadows and animations, to HTML 5 mark-up and local storage, to utilizing jQuery to work with the Picasa API. We’ll also take advantage of the excellent jQuery library, and review some best practices when coding.

An HTML5 Slideshow w/ Canvas & jQuery

All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Designing Search Boxes with HTML5 and CSS3

Search is one of the most important part of any website. Here I will show a few practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.