20 Extremely Helpful HTML5 Tutorials and Techniques


If you already heard about HTML5 but you don’t know from where to start, don’t worry because it’s normal and we’re here to help you to start your journey. It is essential for every web designer to learn HTML5’s usage in order to get spotlight on there designed web page. To get a chance for that spotlight, there are some HTML5 and CSS3 tools that will help you learn this new language.

In case you’re one of those designers that are willing to improve your skills specifically with the power features of HTML5 & CSS3 such as rounded corners, multicolumns, video & audio support, new elements, new attributes, etc., this collection of HTML5 tutorials and techniques will help you to improve your knowledge in the field.

Here’s a collection of extremely helpful CSS3 and HTML5 tutorials and techniques as well as some tips that will help you learn the new language of the web. Also, be sure to check out our collection of fresh free HTML5 and CSS3 website templates for you to try out and analyze the coding techniques of the web designers.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Microsoft PowerPoint Presentation Templates

Create A Grid Based Web Design In HTML5

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. You will learn to build the HTML structure with the latest elements then style up the appearance of the site with CSS3 effects to match the original Photoshop concept with minimal use of background images.

Create A Grid Based Web Design In HTML5

View Source

Code A Backwards Compatible

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

Code A Backwards Compatible

View Source

Coding Up A Web Design Concept Into HTML5

The design features a clean grey background, but with splashes of vibrant colour in the header, and throughout the page with links and buttons taking bright colour swatches from the main illustration. Overall the design has plenty of clean lines, and uses subtle shadows and inset text effects to add that touch of style.

Coding Up A Web Design Concept Into HTML5

View Source

Semantics In HTML5

By an accident of history, we are associated with the development of an important tool our civilization will use to communicate for decades to come. So, when we turn our minds, idly or in earnest, to improving HTML, we must understand just how far-reaching the ramifications of today’s decisions may be.

Semantics In HTML5

View Source

Create An Elegant Website With HTML5

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

Create An Elegant Website With HTML5

View Source

Design & Code A Cool IPhone App Website In HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Design & Code A Cool IPhone App Website In HTML5

View Source

Create A Stylish Contact Form with HTML5

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 Stylish Contact Form with HTML5

View Source

An HTML5 Slideshow w/ Canvas & jQuery

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

An HTML5 Slideshow w/ Canvas & jQuery

View Source

Making a Beautiful HTML5 Portfolio

In this tutorial, you 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.

Making a Beautiful HTML5 Portfolio

View Source

Fullscreen Slideshow with HTML5 Audio and jQuery

In this tutorial you’ll create a fullscreen photo slideshow to illustrate a New York picture series. You will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of a vibrant city.

Fullscreen Slideshow with HTML5 Audio and jQuery

View Source

HTML5 Grayscale Image Hover

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.

HTML5 Grayscale Image Hover

View Source

Easy Percentage Grid System with HTML5

Web grid systems help front end coders to layout a document faster. In this article I am presenting a percentage based grid system. The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element.

Easy Percentage Grid System with HTML5

View Source

Code a Vibrant Professional Web Design with HTML5/CSS3

We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Code a Vibrant Professional Web Design with HTML5/CSS3

View Source

HTML5’s Microdata, Search, and the Collaboration of the Search Giants

One of the most overlooked new features of HTML5 is Microdata. Microdata allows us to more specifically categorize and label our web content in a machine-readable way. Why this is important is because it may positively affect your search results.

HTML5’s Microdata, Search, and the Collaboration of the Search Giants

View Source

How to create offline HTML5 web apps in 5 easy steps

Among all cool new features introduced by HTML5, the possibility of caching web pages for offline use is definitely one of my favorites. Today, I’m glad to show you how you can create a page that will be available for offline browsing.

How to create offline HTML5 web apps in 5 easy steps

View Source

“Mobifying” Your HTML5 Site

The “mobile” battlefield is still uncharted waters for a large number of developers. Many folks have existing legacy sites that neglect mobile users altogether. Instead, the site was designed primarily for desktop browsing and degrades poorly in mobile browsers.

"Mobifying" Your HTML5 Site

View Source

Create A Basic HTML5 Page With The New Layout Tags

In this tutorial, we’re going to build a one-page template using some of the next-generation techniques from HTML5. Everyone’s talking about HTML5, it’s perhaps the most-hyped technology since people started putting rounded corners on everything.

Create A Basic HTML5 Page With The New Layout Tags

View Source

Creating A Minimal Blog Design Using HTML5, CSS3 And jQuery

This post goes through the entire process of designing and writing the front-end code for a modern, minimal blog. The project uses a number of cool technologies including HTML5, CSS3, @font-face and jQuery. The entire project is available as a zip download.

Creating A Minimal Blog Design Using HTML5, CSS3 And jQuery

View Source

Creating a HTML5 And CSS3 Single Page Web Layout

In this tutorial you will learn how to create HTML5 web template with combination with CSS3 and jQuery. Current template will contain header area (with logo and navigation menu), promo area (Author will use jQuery Nivo Slider), center area with some content, bottom area (which you can use for footer links as example), and footer itself.

Creating a HTML5 And CSS3 Single Page Web Layout

View Source

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.

Build A Neat HTML5 Powered Contact Form

View Source

A Collection of Christmas Resources and Inspirations
Authored by: Manuel Garcia

Manuel Garcia is the founder and the brain behind Designrshub.com, a community that provides High Quality Design Inspirations and Resources. He’s a student from Philippines who loves to write for design community and dedicated in sharing inspirational resources. He fell in love with creative writing when he was 15.