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