Below are 11 Fresh Useful HTML5 & CSS3 Tutorials. Many of the techniques discussed are already supported to some extent in some some modern web browsers, so you can get started right away.

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes”.

Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

Tooltips in CSS3 and HTML5

In this tutorial we will learn how to create the simple “tooltips” – pop-up prompts. In this method we will not use JS, we’ll be content with CSS3 and HTML5.

Design a Foursquare-like User Profile Page in HTML5/CSS3

Their design is very simplistic with a 2-column layout split. We’ll be coding this page in HTML5 and CSS3.

Shutter Effect Portfolio with jQuery and Canvas

In today’s tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

Tutorial: Case Study with Html5 + CSS3

To start our case study, I created a simple layout, but where it could apply different concepts of CSS3 and still assemble a structure using HTML5, using the major changes that have occurred on its semantic. The layout that we will build is below:

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.

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.

Create a Typography Based Blog Layout in HTML5

The WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.

Using Modernizr to detect HTML5 and CSS3 browser support

Modernizr is a JavaScript library that detects which features a browser supports. It currently checks 18 CSS3 features and more than 40 HTML5-related ones by examining how the browser responds to a series of tests. This is much more reliable than the outdated practice of checking the browser’s name (browser sniffing). The full set of tests takes only microseconds to perform. What’s more, the Modernizr website maximizes efficiency by automating the creation of a customized script to test only those elements you’re interested in.

Bring Your Forms Up to Date With CSS3 and HTML5 Validation

Let’s look at how to create a functional form which validates users’ data, client-side. With that done, we’ll cover prettying it up using CSS, including some CSS3!