50 Best HTML5 Tutorials 2011

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 parent

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

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

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

12. Scoped Styles in HTML5

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

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 bit of help of JavaScript and HTML5 Canvas

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

22. Use Paper.js to create HTML5 interactive vector animations

Paper.js is an open source vector graphics JavaScript framework built 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 muddle.

29. Native Audio with HTML5

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.

31. Auto-Resizing HTML5 Games

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

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

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

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 side language such as PHP, or we use Javascript, or even both?

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

The Drag and Drop API is one of the new JavaScript APIs that let us add dynamic effects to our sites. There are two flavors of Drag & Drop:

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 user Google maps along with the javascript object – 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 HTML5 game development with JavaScript and the canvas element. You don’t 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.

Source: http://webdesign14.com/50-best-css3-tutorials-2011/