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.
1. HTML5 File Uploads with jQuery
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.
2. Making a Beautiful HTML5 Portfolio
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.
3. How to Code a Clean Website Template in HTML5 & CSS3
4. 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’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.
5. HTML5′s New “form” Attribute
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.
6. Create Vector Masks using the HTML5 Canvas
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
7. Create a Grid Based Web Design in HTML5 & CSS3
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.
8. Fullscreen Slideshow with HTML5 Audio and jQuery
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.
9. How to Create an HTML5 Microdata Powered Resume
This tutorial demonstrates how to create an online resume that
incorporates Schema.org Microdata. The tutorial also includes
instructions on how to use Authorship Markup!
10. HTML5 Grayscale Image Hover
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
11. Build your First Game with HTML5
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
The topic of scoped CSS styles in HTML5 came up twice in the comments of a recent post by Chris Coyier.
13. How to Build Cross-Browser HTML5 Forms
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.
14. My Preferred Syntax Style for HTML5 Markup
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
15. Creating a HTML5 & CSS3 Single Page Web Layout
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.
16. Build your own HTML5 3D engine
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
17. Build a Neat HTML5 Powered Contact Form
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.
18. Create a stylish HTML5 template from scratch
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.
19. Create a page flip effect with HTML5 canvas
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.
20. Making Forms Fabulous with HTML5
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.
21. Learning To Use HTML5 Semantic Elements
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
22. Use Paper.js to create HTML5 interactive vector animations
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
23. Automated Optimization with HTML5 Boilerplate Build
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.
24. HTML5 Techniques for Optimizing Mobile Performance
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.
25. How to Build Asteroids with the Impact HTML5 Game Engine
In this tutorial, I’m going to show you how to build a simple
space-based asteroids game using the Impact game engine, one of the more
robust engines out at the moment.
26. How to create a Progress bar with HTML5 Canvas
There is a great amount of articles about Canvas on the internet, but
I would like to show the example of how you can use Canvas on practice,
namely the creation of animated progress bar.
27. Syncing Content With HTML5 Video
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
28. HTML5: New Functions Of The Old Tags
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
30. Learning the basics of HTML5 canvas
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
32. How to Make Your Own Video Player On HTML5 Video
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.
33. How to Create a Contact Form using HTML5, CSS3 and PHP
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.
34. Content editable Feature in HTML5
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.
35. Link users to geolocation data with HTML5
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.
36. Using HTML5′s New Semantic Tags Today
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.
37. HTML5 Placeholder stylization with the help of CSS
HTML5 has a wonderful attribute – placeholder (text prompts for input elements). It can be specified in a following way:
38. HTML5 & CSS3 – What You Should Know
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
39. “Mobifying” Your HTML5 Site
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
40. Accessibility and HTML5 Block Links
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?
41. Creating an HTML5 Form Using the New Form Types
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
42. Simple Tool to Create Free HTML5 Slideshows of Images
In today’s world where attention spans are less and having your
photos shown in a quick slide-show is better as some people might not
want to look at all the photos without a preview of sorts.
43. Cross-Browser HTML5 Placeholder Text
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.
44. A Drag and Drop Planning Board with HTML5
add dynamic effects to our sites. There are two flavors of Drag &
45. Detect Geolocation On Web Browser Using HTML5
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.
46. How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery
The way the bar pops out at the top makes sure it’ll be seen. And
after the visitor has seen the information, he/she has the option to
hide the bar.
47. Create a Posticks (Sticky Notes) app with HTML5, CSS3 and jQuery
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.
48. Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC
This tutorial will teach you the basics of how to work with editor
templates, display templates, and the jQuery UI datepicker popup
calendar in an ASP.NET MVC Web application.
49. Learn HTML5 With This Simple Avoider Game Tutorial
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!
50. Avoiding common HTML5 mistakes
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.