15 Amazing Collection HTML5 Tutorials

HTML5 is the future of web development. It is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. HTML5 introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. In this post dailysyntax collected some great and amazing html5 tutorials for developers who going to learn html5 or who going to find new ideas for own projects.

html5 tutorials 15 Amazing Collection HTML5 Tutorials

Making a Beautiful HTML5 Portfolio

HTML5 Portfolio 15 Amazing Collection HTML5 Tutorials

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.

View The Tutorial : Making a Beautiful HTML5 Portfolio

Create a Drawing App with HTML5 Canvas and JavaScript

HTML5 Canvas JavaScript 15 Amazing Collection HTML5 Tutorials

This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn:

  • How to draw dynamically on HTML5 canvas
  • The future possiblities of HTML5 canvas
  • The current browser compatibility of HTML5 canvas

View The Tutorial : Create a Drawing App with HTML5 Canvas and JavaScript

Implementing HTML5 Drag and Drop

HTML5 Drag Drop 15 Amazing Collection HTML5 Tutorials
One of the new features in HTML5 is native drag and drop. Surprisingly, Internet Explorer has had support for this since version 5.5; in fact, the HTML5 implementation is based on IE’s support. In this week’s Premium tutorial and screencast, we’ll look at how to implement native drag and drop to build a simple shopping cart interface.

View The Tutorial : Implementing HTML5 Drag and Drop

Detect Geolocation On Web Browser Using HTML5

HTML5 geolocation 15 Amazing Collection HTML5 Tutorials
This Tutorial how to Detect Geolocation On Web Browser Using HTML5. It’s 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.

View The TutorialDetect Geolocation On Web Browser Using HTML5

Blowing up HTML5 video and mapping it into 3D space

HTML5 video mapping 15 Amazing Collection HTML5 Tutorials
This tutorial doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight.

View The Tutorial : Blowing up HTML5 video and mapping it into 3D space

Design & Code a Cool iPhone App Website in HTML5

HTML5  iPhone App 15 Amazing Collection HTML5 Tutorials
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.

View The Tutorial : Design & Code a Cool iPhone App Website in HTML5

Create Vector Masks using the HTML5 Canvas

HTML5 Canvas 15 Amazing Collection HTML5 Tutorials
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. In this post we will look at how to use the canvas tag and clipping to create images that aren’t so rectangular.

View The Tutorial : Create Vector Masks using the HTML5 Canvas

Getting Started with Web Audio API

HTML5 web audio 15 Amazing Collection HTML5 Tutorials
Before the HTML5 <audio> element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications.

View The Tutorial Getting Started with Web Audio API

Interactive Typography Effects with HTML5

HTML5 Interactive Typography Effects 15 Amazing Collection HTML5 Tutorials
This tutorial outlines what is really just the tip of the iceberg that is interactive design. I will go over the development of dynamic, and generative banners to give your website that little extra wow!

View The TutorialInteractive Typography Effects with HTML5

HTML5 canvas – Creating Your Own Paint Program

HTML5 canvas paint 15 Amazing Collection HTML5 Tutorials
New interesting article about canvases in HTML5 – This tutorial show you how you can create nice and simple Paint program. Main idea – to draw a color picker area (rainbow gradient), and load some image to another canvas (here we will draw with selected color).

View The Tutorial : HTML5 canvas – Creating Your Own Paint Program

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. this tutorial show you how to use HTML5 & jQuery to dynamically clone color images into grayscale

View The TutorialHTML5 Grayscale Image Hover

One Page Portfolio with HTML5 and CSS3

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. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.

View The TutorialOne Page Portfolio with HTML5 and CSS3

Lights Off – A puzzle game using HTML5 canvas

One of the most interesting new HTML5 elements, has to be <canvas>. This element allows the developer to draw anything using JavaScript. Lights Off, one of the first native games for the iPhone, but now using HTML5 <canvas>.

View The TutorialLights Off – A puzzle game using HTML5 canvas

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

View The TutorialA Drag and Drop Planning Board with HTML5

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 The TutorialCreate a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5