50 Best HTML5 Tutorials 2011
Join the DZone community and get the full member experience.Join For Free
Today we present a collection of best CSS3 and HTML5 tutorials for 2011.
Today we will be developing a small web application called Upload
Center, that will allow people to upload photos from their computers by
dragging and dropping them onto the browser window, possible with the
new HTML5 APIs exposed by modern browsers.
In today’s tutorial we will be making a beautiful HTML5 portfolio
powered by jQuery and the Quicksand plugin. You can use it to showcase
your latest work and it is fully customizable, so potentially you could
expand it to do much more.
Follow this step by step process to create your own stylish contact
form completely out of HTML5 and CSS3. We’ll 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.
One challenge that developers have faced when creating forms is the inability to separate a form control from its parentelement without having to resort to some undesirable methods to get that form control to submit its data along with the form.
The HTML5 canvas can be used to create a lot of cool things, like
games, video effects, graphs and more. It can also be used to produce
some slightly less complex effects, like manipulating images on the
Follow this step by step walkthrough of the making of a sleek website
design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML
structure with the latest elements then style up the appearance of the
site with CSS3 affects to match the original Photoshop concept with
minimal use of background images.
In today’s tutorial we’ll create a fullscreen photo slideshow to
illustrate a New York picture series. We will add sounds with the HTML5
audio element in order to give life to the gallery and try to recreate
the ambient of this vibrant city.
Once upon a time, grayscale image has to be manually converted in
order to be displayed on the web. Now with HTML5 canvas, images can be
manipulated into grayscale without having to use image editing software.
I’ve put together a demo to show you how to use HTML5 & jQuery to
dynamically clone color images into grayscale (see demo). Credits:
thanks to Darcy Clarke (my Themify’s partner) for the jQuery and
HTML5 is growing up faster than anyone could have imagined. Powerful
and professional solutions are already being developed…even in the
gaming world! Today, you’ll make your first game using Box2D and HTML5′s
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.
Ever since HTML5 has started to gain wider use, many developers have
wondered what syntax style should be most prevalent. When coding HTML in
XML format, it was easy–because the validator forced you to code in a
Today we will create HTML5 web template with combination with CSS3
and jQuery. Current template will contain header area (with logo and
navigation menu), promo area (I will use jQuery Nivo Slider), center
area with some content, bottom area (which you can use for footer links
as example), and footer itself.
When Toronto agency Jam3 built www.bjork.com, a site that features an
interactive real-time rendered 3D model, they decided to create their
own engine to ensure it turned out the way they wanted. Here senior
developer Mikko Haapoja explains how you can do the same with a little
In this tutorial, we are going to learn how to create a swanky HTML5
AJAX powered contact form. The form will use some of the new HTML5 input
elements and attributes, and will be validated using the browser’s
built-in form validation.
HTML5 is certainly one of the latest buzzwords in the web community.
It isn’t something new anymore and we’ve already seen how cool it is.
Features like simplified doctype, more semantic markup, input types and
placeholders are just some of the reasons you’d like to use HTML5.
For a long time, web developers leaned on plug-ins to bring truly
immersive and rich interactive experiences to their users. HTML5 has
begun to change all this by bringing some of the most crucial building
blocks of these web augmentations to the open web.
Not many people get excited about forms, but HTML5 brings some big
improvements, both for the developers creating them and for the users
filling them out. New form elements, attributes, input types,
browser-based validation, CSS3 styling techniques, and the FormData
object make it easier and hopefully more enjoyable to create forms.
HTML5 has several new layers, including a new set of semantic tags.
While there is still some debate about whether or not we should be using
and styling these tags I think at the very least we should start
on top of HTML5 canvas and developed by the incredible Jürg Lehni and
Jonathan Puckey. Dr Woohoo, Claus Wahlers and Rasmus Blaesbjerg from
HAUS create an example that explores Paper.js
HTML5 Boilerplate is widely recognized as a rock-solid foundation for
building new web-based sites and applications. That said, few are aware
that the tool offers more than simply setting up your development
environment. It also helps you “wrap up” your work by providing an
awesome cross-platform build process.
In this article, we will discuss the bare minimum of what it takes to
create a mobile HTML5 web app. The main point is to unmask the hidden
complexities which today’s mobile frameworks try to hide. You will see a
minimalistic approach (using core HTML5 APIs) and basic fundamentals
that will empower you to write your own framework or contribute to the
one you currently use.
One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic
It is well known that tags b, i, s, small are presentational, and
consequently, in terms of a paradigm “structure, presentation, behavior”
their use is not welcomed. Elements strong, em, del are seemed more
usual. So it was during the long years of development practice. However a
great deal changed in semantics of these elements with arrival of
HTML5. Now we have 4 new tags with sense and our thoughts are in a
Today, we have another option: HTML5
By now you should already have a good idea about what canvas is and
why it’s a fantastic part of HTML5. In this article, we will take a
proper look at the features of canvas, from learning how to actually get
it into a HTML document to drawing shapes and other kinds of objects on
it. We will also look at how to change how shapes and objects are drawn
on canvas, as well as finding out how to erase it. Finally, we’ll end
with an example showing you how to make canvas the same size as the
browser window, an integral skill to have for developing immersive
games. I hope by the end of this tutorial that you feel even more
excited about HTML5 canvas and the possibilities that it opens up in
front of you.
In the summer of 2010, we created Sand Trap, a game that we entered
in a competition on HTML5 games for mobile phones. But most mobile
phones either displayed only part of the game or made the game too
small—making it completely unplayable. So we took it upon ourselves to
make the game fluidly adjust to match any resolution. After a bit of
re-programming and using ideas outlined in this article, we had a game
that scaled across any modern browser, whether it ran in a desktop or a
Today we are going to cope with the task of creating your own video
player on HTML5 Video. Let me remind you that the video-element by
itself already provides the necessary set of controls for playback
controlling. In order you could see the playback control panel, it’s
necessary to set the controls attribute.
Personally, I feel it is important to be aware of the [positive]
impact HTML5 will have on forms and the way they will function in years
to come. Realistically, we can’t implement all of the new features
today, but you don’t want to be lagging behind the rest of the industry
when these features finally become widely supported.
One of the HTML5 innovations has become the ability to edit the page
in the browser. This feature is called content editable. It works in all
modern browsers. To make the page editable, you need to put the tag
attribute contenteditable = “true”. Under the tag can be almost
everything: formatted text, images, lists, and even flash-movies. But
you can add only text, the rest can only be removed. In this post I’ll
show an example of using content editable on the website.
Using geolocation, site builders can now enable visitors to interact
with content and applications in new ways. In this tutorial, I’ll walk
you through how to use the new HTML5 GeoLocation jQuery Plugin – which
works even when geolocation isn’t supported by the user’s browser –
along with address information written in hCard microformats, to
indicate which locations are closest.
HTML5. Everybody’s talking about it. If it isn’t my friend who threw
together a pretty sweet audio drum kit, it’s that buzzword-loving Vice
President of Marketing who read somewhere that Flash is dead and HTML5
is the future. But just because everybody’s talking about it, doesn’t
mean everyone understands it.
HTML5, in conjunction with CSS3, will be a major alteration of how
web pages are built once it is fully implemented. HTML4 was originally
released in 1999 after only two years of work. There have been some
minor adaptations since then, but the full upgrade to HTML5 has been “in
committee” since 2001. The predicted finalization date was, at one
point, extended as far out as 2022. That estimate has since been
adjusted and the final release date is now believed to be sometime in
2014. As always, the biggest factor in the delays has been Microsoft.
The behemoth simply doesn’t make quick adjustments. For years, they
didn’t seem to be making any effort to adapt IE for using HTML5.
Presently, they are working toward it and IE 9 can use some of the new
Developing for the mobile web is a hot topic these days. This year,
for the first time ever, smart phones out sold PCs. More and more users
are using a mobile device to traverse the web, which means it’s becoming
critical for developers to optimize their sites for the mobile
In HTML5, it is valid and considered to be perfectly acceptable to
create links that surround block level content. The only exception is
that you can’t nest links. So how does this play out in browsers and
assistive technologies that weren’t designed with this in mind?
A web form is something that we all use at some stage in our online
activities. As web designers and developers, we are always finding
ourselves building or designing one, which at the least, would be the
contact page of our website project. Unfortunately, it is not the nicest
job in the world and can become quite a chore as some forms can get
very complicated when you start talking about validation, error handling
and styling. We either validate and catch our errors using a server
One of the nice enhancement in HTML5 web form is being able to add
placeholder text to input fields. Placeholder attribute allows you to
display text in a form input when it is empty and when it is not focused
(it clears the field on focus). This is a nifty feature, but it is not
supported by all browsers yet. This tutorial will show you how to use
Modernizr to detect if placeholder is supported, or else use jQuery to
display the fallback placeholder text dynamically.
HTML5 is been a part of many of my projects and once again I want to
share a pretty interesting usage of HTML5 to detect geolocation of the
user from the web browser. Currently most of the web browser support
HTML5 except the lame Internet Explorer and this geolocation detection
works fine with Firefox, Opera, Chrome and Safari. If you have an
iPhone, you can see the thing happening in it. The geolocation feature
navigator.geolocation and HTML5. This is not a pure HTML5 source, but
its good to have these here.
While I was on vacation in Dominican Republic, I had some free time
to work in a small application that creates Posticks notes, or sticky
notes, in the browsers and save it in the localStorage of the browser.
If you want to know what I am talking about you can visit the demo. In
addition, I would like to recommend reading about the following topics:
HTML5, CSS3, contenteditable, and localStorage.
In this tutorial (the first of a series), you’ll learn the basics of
need to have any programming experience, or even any HTML experience
(apart from this one article). Let’s get started!
Between curating sites for the HTML5 gallery and answering readers’
questions here at HTML5 Doctor, I see a host of HTML5 sites and their
underlying markup. In this post, I’ll show you some of the mistakes and
poor markup practices I often see and explain how to avoid them.
Opinions expressed by DZone contributors are their own.