Best Showcase of HTML5 Tutorials

Ayelet Zurer Posted on 22. May, 2012 | Comment in!

• Tweet

• Tweet

A web design that you make with different applications should be used on different platforms, designers keep careful to build their web sites using the newest applications, and one of the best web application is HTML5. You create many variations with HTML5 such as web designs, flash, jQuery and much more. Its implementations are appearing all over the world, web designers are already switching to HTML 5 platform because they get fruitful results in their design assignments using HTML5, it’s a powerful web application, so many web designers and developers has started the practice of HTML5 and web pages now become more semantic with tags.

It gives web designers and developers new abilities, it expanded the possibilities of the web designs, that’s why HTML5 is becoming popular. So every web designer and developer should know about the basic compatibility and features of this powerful web application. Today I’m showing the best examples of how HTML can be used in your web designs and web developments, if you want to increase your HTML5 skills, check out best HTML5 tutorials below that you can’t afford to miss if you’re web designer or developer, you can with no trouble make your web projects with these tutorials.

• Tweet

• Tweet

Toying With the HTML5 File System API

In today’s tutorial, we’ll go through the basics of this new and exciting API, exploring the most common filesystem tasks. Let’s get started!

View Tutorial

Create A Minimal Single Page Portfolio With HTML5/CSS3

This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initiallydesigned the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

View Tutorial

Building Web Pages With HTML 5

The problem with both sides of the argument is that very few sites are using HTML 5 in the wild, so the theoretical solutions to its perceived problems remain largely untested.

View Tutorial

An in Depth Analysis of HTML5 Multimedia and Accessibility

In this tutorial, you’ll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, you’ll increase the availability of your media to users with different.

View Tutorial

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” that look and work like the following…

View Tutorial

HTML5 Clocks

For our new lesson I have prepared nice pure HTML5 clocks. This is pretty easy script, but it is very easy and impressive (as usual). Of course – anything necessary will be at canvas object.

View Tutorial

HTML5 Image Effects – Emboss

Today we continue our HTML5 canvas image filter examples, today I would like to share with you a method of applying a Emboss effect to images. This is pretty difficult method, but I sure that you can repeat it. In our demo we can play with different images by adding a emboss effect to them, as well as we can ‘export’ our result on the image element.

View Tutorial

HTML5 Face Builder

This is another interesting application of HTML5. Today I have developed a little ‘toy’. This little toy can be enhanced into something big. Welcome to test new HTML5 tool – Face Builder (canvas). This tool will allow your members (visitors) to compose their faces, you can select through predefined elements (face, eyes, nose, mouth), and in end – you can ‘export’ result into image (like crop tool).

View Tutorial

HTML5 Drag and Drop – sorting photos between albums

Today, I would like to tell you about Drag and Drop and HTML5. As you know (I hope), all modern browsers (it should be FF, Safari, Chrome, possible Opera) have native support of this useful feature (as drag and drop).

View Tutorial

HTML5 Tutorial

This HTML5 tutorial is designed by creating a basic layout in mind and then populating the layout using the new elements introduced in HTML5.

View Tutorial

LOGIN AND REGISTRATION FORM WITH HTML5 AND CSS3

A tutorial on how to create a switching login and registration form with HTML5 and CSS3.

View Tutorial

INTERACTIVE TYPOGRAPHY EFFECTS WITH HTML5

With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the development of dynamic, and generative banners to give your website that little extra wow!

View Tutorial

HTML5 Image Effects – Sepia

Today we continue our HTML5 canvas examples, today I want to share with you a method of applying a sepia effect to images. This is not a very difficult method, anyone can repeat it. In our demo we can play with different images by adding a sepia effect to them, as well as we can ‘export’ our result on the image element (<img>).

View Tutorial

Quick Tip: The Awesome Details Element

The details element allows us to omit the JavaScript entirely. Or, better put, it eventually will. Browser support is still a bit sparse.

View Tutorial

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.

View Tutorial

HTML5 Drag and Drop Multiple File Uploader

Our new article is going to tell you about HTML5 file upload. Yes, I explained basics of html5 file upload in the past (in one of our previous articles), but today I would like to give you another example, the better one. Now, you can just drag and drop your images (multiple images) in order to start uploading.

View Tutorial

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.

View Tutorial

Modernizr detect HTML5 and CSS3

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

View Tutorial

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!

View Tutorial

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.

View Tutorial

HTML5 Game Development – Lesson 7

This tutorial aims to teach you the ins and outs of HTML5 canvas by detecting basic collisions to create an Araknoid game. You’ll learn how to use HTML5 local storage for better performance, game saves and score tally, and how to integrate keyboard controls. These techniques can be applied to your own projects for creating an endless number of interactive experiences.

View Tutorial

Creating a 3D Animated Box HTML5 WebGL Photo Slideshow

Today we continue HTML5 canvas examples. I use WebGL technology in order to map a sequence of images on a rotating cube. Cube is not just spinning all the time, but also makes a little pause between images.

View Tutorial

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.

View Tutorial

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 a HTML5 template.

View Tutorial

How To Build a Handwritten Letter Style Contact Form

Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting.

View Tutorial

Interactive Typography Effects with HTML5

With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the development of dynamic, and generative banners to give your website that little extra wow!

View Tutorial

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.

View Tutorial

Create a Typography Based Blog Layout in HTML5

Last week I posted part one of this tutorial series covering the process of creating a typography based blog design in HTML5 and CSS3. We finished off the Photoshop concept with the design based on a strict grid and text laid out in our desired typeface. Now let’s replicate the design in a static HTML5 and CSS3 prototype before finishing it all off as a fully working WordPress theme.

View Tutorial

HTML5 & CSS3 envelope contact form

In this article you’ll learn how to create a nice CSS3 contact form using also some HTML5 features.

View Tutorial

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.

View Tutorial

Author: Ayelet Zurer

17 Arcticles posted by Ayelet Zurer