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.
Making a Beautiful HTML5 Portfolio
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
- How to draw dynamically on HTML5 canvas
- The future possiblities of HTML5 canvas
- The current browser compatibility of HTML5 canvas
Implementing HTML5 Drag and Drop
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
View The Tutorial : Detect Geolocation On Web Browser Using HTML5
Blowing up HTML5 video and mapping it into 3D space
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
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
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
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
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 Tutorial : Interactive Typography Effects with HTML5
HTML5 canvas – Creating Your Own Paint Program
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 Tutorial : HTML5 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 Tutorial : One Page Portfolio with HTML5 and CSS3
Lights Off – A puzzle game using HTML5 canvas
View The Tutorial : Lights Off – A puzzle game using HTML5 canvas
A Drag and Drop Planning Board with HTML5
View The Tutorial : A 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 Tutorial : Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5