HTML5 Techniques – Ultimate Collection of Tutorials

Author: | Posted in HTML5 7 Comments

As my experience we always close to the latest technologies as we have one step ahead on web development techniques as HTML5. HTML 5 is the advanced version of  HTMLHTML 5 is giving  new techniques and advanced features/structure in designing. These new features and tags makes designing very easy to create a web page.

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.

In an front-end development effort to encourage our respected visitors and readers to do the same and to prepare you for the future, we’ve rounded up “HTML5 Techniques – Ultimate Collection of Tutorials“.

How to Make an HTML5 iPhone App

You’ve 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 C—or a form of it—and it’s 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, 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.

A Marriage Made in Heaven? HTML 5 and CSS3

Perhaps foreshadowed by Google’s adoption of HTML 5, Jeffrey Zeldman pointed out late last week; the future of XHTML 2 is no more. Obviously the selectors we use in CSS 3 depend on the underlying markup we work with, so this news is very interesting and we think timely. As CSS 3 support inches forward with each browser release and as JavaScript libraries supplement poor browser behavior, the need for web developers and enthusiasts to be able to focus their attention has become a paramount concern.

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.

When can I use…

Look up which browsers support CSS3, HTML 5, and other technologies not supported by all browsers.

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

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 navigation’s 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.

Design & Code a Cool iPhone App Website in HTML5

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’ll be ready to build an accompanying website for our PKE Meter application.

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.

HTML5 Features

Official Specification Document is the best place to look for HTML5 features, but you can also start with simple and easy to follow HTML5 Tag Reference at W3Schools. We will cover following features in this article:

  • Semantic Markup
  • Form Enhancements
  • Audio / Video
  • Canvas
  • ContentEditable
  • Drag and Drop
  • Persistent Data Storage

Designing 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’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications2 does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

HTML5 JavaScript APIs

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

In December of last year, Remy Sharp spoke at CODEBITS about the various new HTML5 APIs. In the talk, he covers the video element, canvas, web storage, and other techniques.

Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Quick Tip: Mimic Equal Columns with CSS3 Gradients

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

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

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.

Firstly what we’ll do is use the header, footer, and nav elements to mark up the broad structure of the page. We’ll 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’ll do some work on the guts of the page, using HTML 5’s 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’ll see what HTML 5 offers us for representing dates and times.

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.

HTML5 Audio and Video: What you Must Know

In promotion of what I consider to be the best HTML5 book currently available on the market, Remy Sharp and Bruce Lawson agreed to donate a chapter of Introducing HTML5 to our readers, which details the ins and outs of working with HTML5 video and audio.

A LONG TIME AGO, in a galaxy that feels a very long way away, multimedia on the Web was limited to tinkling MIDI tunes and animated GIFs. As bandwidth got faster and compression technologies improved, MP3 music supplanted MIDI and real video began to gain ground. All sorts of proprietary players battled it out—Real Player, Windows Media, and so on—until one emerged as the victor in 2005: Adobe Flash, largely because of the ubiquity of its plugin and the fact that it was the delivery mechanism of choice for YouTube.

HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. This article largely discusses the <video> element, as that’s sexier, but most of the markup and scripting are applicable for both types of media.

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

Create an Elegant Website with HTML 5

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

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 it’s just how Adit has described.

Coding Up a Web Design Concept into HTML & CSS

I’ve recently been working on a design concept for a WordPress theme as part of a personal project. 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.

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.

Comprehensive video tutorial on HTML5

This is an old 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.

The topics covered in this article are:

  • Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
  • The Geolocation API
  • HTML 5 Video
  • The HTML 5 Database and Application Cache
  • Web workers

The video is long enough, so sit back and enjoy it completely and thank us later for digging this out for you.

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.

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.

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.

Pocket Books

Build a Custom HTML5 Video Player: Free Premium Tutorial

Much like the other various Envato marketplaces, our newly launched Tuts+ marketplace will offer a free file each month. For September, that free file/tutorial just so happens to mine! I’ll show you how to build a custom HTML5 video player with Flash fallback support.

Be sure to grab this one for free for the entire month of September. Next month, it’ll return to its original price.

Quick Tip: Getting Offline Access with HTML5 Application Cache

Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.

Comments
  1. Posted by Perfectmirrors
  2. Posted by billard
  3. Posted by technology review
  4. Posted by JPop
  5. Posted by Mihai O.
  6. Posted by graham
  7. Posted by Julian Burbidge

Add Your Comment