The Ultimate HTML5 Tutorials and Useful Techniques

We always prefer new technology and techniques for make better performance in our work, we’re talking about new new fundamental markup language for the web HTML5 that you all love so much. HTML5 is giving web designers and developers new capabilities in the world of web development. With the presence of HTML5, web application development will be more fun.

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern websites. Some of them are semantic replacements for common uses of generic block (<div>) and inline (<span>) elements, for example <nav> (website navigation block) and <footer> (usually referring to bottom of web page or to last lines of html code). HTML 5 features like Canvas, local storage, and Web Workers let us do more in the browser than ever before.

Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. This Special HTML5 Roundup a twig of useful tutorials, techniques and examples that will most probably help you through and make it easier for you to understand HTML 5.

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

In his article on Design Informer titled Web Design Iterations And Algorithm, Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally its just how Adit has described. Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, Houston, we have a big problem! We should create a working web design.

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

How to Make an HTML5 iPhone App

You have been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its or a form of it and its really hard to learn.

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, its 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 will show you how to create an offline HTML5 iPhone application. More specifically, I will walk you through the process of building a Tetris game.

Designing a Blog With HTML5

Much of HTML 5 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, lets look at marking up a blog. Firstly what we will do is use the header, footer, and nav elements to mark up the broad structure of the page. We will make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we will do some work on the guts of the page, using HTML 5 article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we will see what HTML 5 offers us for representing dates and times.

HTML5: The Basics

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we will be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the best markup trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there no reason not to start using it right now. After all, times proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we are going to experiment a little with these new technologies. At the end of this article you will 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.

It would be a good idea to have a read at some of these articles first:

• HTML5 and The Future of the Web which teaches the very basics of HTML5, introduces new elements and explains some of the advantages of the new markup language.
• HTML5 enabling script which shows a method that enables HTML5 tags on IE6 to be styled.
• Understanding aside where the usually misunderstood new tag is explained.

I will also assume you know the basics of HTML and CSS. Including all the old school tags and the basic selectors and properties.

Building a Live News Blogging System

During this series of posts we’re going to tackle building a live news blogging system. There will be multiple administrators who can add, delete and edit news. Each news can be assigned to one category only. The visitors will be able to see all news, filter them based on categories and publishing date. If one’s online and a news is published it will receive a pop-up that will let him know there’s new news in the feed just like Twitter displays the new tweets message on top of the timeline.

You can click the above screenshot to get a full preview of how the layout will look like. Remember we’re building it with HTML5 which means it will look really bad on older browsers and Internet Explorer. The end goal of this task is not to build the news system alone, but to showcase some of the emerging technologies. I have no clue how many parts this tutorial will have. However, time will tell. Today we’ll tackle coding the layout, styling it and adding some basic jQuery features.

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 divs everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question.

Code a Vibrant Professional Web Design with HTML5/CSS3

In this second part of this web design tutorial series, we will convert the vibrant and professional design we designed in Part 1. 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.

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

HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app. How about we use the recent tutorial I wrote over at Tutorial9 as a base for our app website? This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we will be ready to build an accompanying website for our PKE Meter application.

Create a Stylish Contact Form with HTML5 & CSS3

Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We will be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code. The design we will be building features all the things that make a rich interface; gradients, highlights and shadows! We will create a visual concept in Photoshop first of all, but when it comes to building the form we will recreate every effect with HTML5 and CSS3.

Blowing up HTML5 video and mapping it into 3D space

I have 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.

The video element in HTML5

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. Of course, this will only work in a few browsers: Safari 3.1+, Firefox 3.5+, and latest builds of Opera (oh, and potentially the next release of Chrome).

Create offline Web applications on mobile devices with HTML5

The use of Web development in mobile applications is an increasing trend. However, intermittent network availability is a big obstacle to using Web technology as part of a cloud infrastructure. A traditional Web application simply doesn’t work without a network. One solution to this problem is to use two features of the HTML5 Standard…

• Offline Web applications
• Client-side database storage

The user can use cloud functions on a mobile device, work offline with a locally deployed application on a local database, and share data with the rest of the cloud when going online again. In this article, learn the technical details for a typical usage scenario. A prototype of a simple inventory management application demonstrates the HTML5 technology.

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.

Implementing HTML5 Drag and Drop: New 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 Its support. In this weeks Premium tutorial and screen cast, we will look at how to implement native drag and drop to build a simple shopping cart interface.

The Power of HTML 5 and CSS 3

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. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.

As far as we have 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.

Have a Field Day with HTML5 Forms

Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we are 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 have read this article.

How to Build Cross-Browser HTML5 Form

In this tutorial, we are 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.

Introduction

One of the first efforts toward HTML5 was WHATWG’s Web Forms 2.0, originally called XForms Basic. The spec introduced new form controls and validation, among other things. Later, it got incorporated into HTML5, and was subsequently stripped of the repetition model, resulting in what we know today as HTML5 Forms. The ever-present issue, backward compatibility, still remains a headache though, unfortunately. Developers have to deal with the dreaded Internet Explorer, which, as you might have guessed, doesn’t provide much support for the latest advancement in forms even in the latest available beta of IE9. Older versions of IE? Fagetaboutit.

Nonetheless, we want to use these new features, and use them, we will! Today, we are going to look at some of these new elements. We will check whether the browser support these features, and if not, provide fallbacks using CSS and JavaScript.

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:

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 new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

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 lets dig in.

Coding a CSS3 & HTML5 One-Page Website Template

Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years. But changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5 the new version of the fundamental language of the web.

Today we are making 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 here.

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.

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

Semantics in HTML 5

I am going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web tools, protocols, and platforms for it to be abandoned lightly, if indeed at all.

Lets stop to consider our responsibility. By an accident of history, we are associated with the development of an important tool our civilization will use to communicate for decades to come. So, when we turn our minds, idly or in earnest, to improving HTML, we must understand just how far-reaching the ramifications of today’s decisions may be.

HTML 5, the W3C recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more.

There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in A Preview of HTML 5 But for this article, lets turn solely to the semantics of HTML. Its something I have been interested in for many years, and something which I believe is fundamentally important to the future of HTML.

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.

Drag and drop Using HTML5

As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working in the latest Firefox browser only at the moment..

HTML5 Unleashed: Tips, Tricks and Techniques

Can we use HTML5 today? What can we do with it? Is it really going to kill Flash? You must have noticed a gradual increase in the frequency of these and similar questions being asked, debated and even answered. In my opinion, you must answer such fundamental questions yourself. The whole purpose of this article is to help you get started with some basic guidelines and easy to follow code templates. If you are familiar with the basics and want to take things to the next level, you will also find several useful resources providing more tips, tricks and techniques.

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.

Yes, You Can Use HTML 5 Today!

The blogosphere was jerked into excitement when Google gave a sneak preview of its new service, Google Wave. Only the select few have an account, but there an 80-minute video about it on YouTube for the rest of us. The service is an HTML 5 app, and so HTML 5 has gone from being too far away to care about to today’s hot topic.

There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunts 2007 article on A List Apart, A Preview of HTML 5. Lets see what happening in the world of HTML 5.