For today’s round up, we have chosen to showcase some very useful HTML5 tools, Tutorials and other resources that will help you improve your HTML5 skills. From the time when HTML5 was first introduced, it has been a fresh change and therefore, we are seeing increased implementations of HTML5. With its advanced and improved functionality, it is pushing the standards of web development. Furthermore, the significant drop in the usage of Flash has further opened new doors for this technology.
Below, we have selected some useful HTML5 tools and resources for web designers and developers. We hope that you will like this collection. Enjoy browsing through this collection and be inspired.
Patternizer – Stripe Pattern Generator Tool
Patternizer is an easy to use stripe pattern generator. It's lots of fun and free.
Spritebox – Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the
background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of jQuery, CSS3 and HTML5, and is totally free to use.
The HTML5 Test
The HTML5 Test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications.
Sketch in 3D With Animating Lines on HTML5 Canvas
Remember the old cartoons where hand drawn lines appeared to vibrate because of differences between frames? That's what this experiment simulates. It also adds a third to your drawings by allowing you to rotate the canvas.
Font Dragr – Drag and Drop Font Testing
A revolutionary way to test custom fonts in the browser. No coding, no uploading, just drag and drop.
MRI helps you create the best possible selectors for your CSS. Add MRI to your bookmarks bar, then for any page, click an element, and MRI suggests selectors for that element. You can also test selectors with it. MRI also uses lots of cool CSS3 features like
text-shadow, as well as the HTML5 canvas.
XRAY works in Safari, Firefox and Internet Explorer. It helps you visualize the layout of your page. Add it to your bookmarks, and then on any web page, use it to see the position, margins, padding, dimensions and more details of any element. XRAY uses lots of cool CSS3 features like
opacity, box and text-shadow, as well as the HTML5 canvas.
SVG to HTML5 Canvas Converter
Rendera helps you learn HTML5 and CSS, type in your HTML code and see it rendered in realtime. Then style it with CSS. You can use any of the HTML5 or CSS3 tags your browser supports.
The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects.
Initializr is an HTML5 templates generator to help you get started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!
Html5 File Upload with Progress
Html5 finally solves an age old problem of being able to upload files while also showing the upload progress.
How to Make All Browsers Render HTML5 Mark-up Correctly
Demo | Download
HTML 5 Layout
In this tutorial learn how to code an HTML5 Layout From Scratch.
Design & Code a Cool iPhone App Website in HTML5
( Demo | Download )
In this tutorial you’ll get a taste of HTML5 by building a cool iPhone app website using an HTML5 structure, and visual styling with some CSS3 effects.
Build a Neat HTML5 Powered Contact Form
Demo | Download
In this tutorial, 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. We will use jQuery and Modernizr to help out with the older browsers, and PHP on the server side to validate the input.
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. You will use a couple of the handy new features in HTML5 to add cool functionality to your form, while making use of cool CSS3 properties to recreate a Photoshop concept purely in code.
Rethinking Forms in HTML5
While there are many changes for the better in the HTML5 specification, there is no better bang for the buck for the data driven website than the transformation of forms. These simple changes will transform how you enter, validate, process, and even display inputs. You will be able to create more usable web applications with less code and less confusion.
Have a Field Day with HTML5 Forms
This article takes a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. Hopefully you will want to style your own forms after you’ve read this article.
How to Make an HTML5 iPhone App
Here you will learn how to create an offline HTML5 iPhone application. More specifically, the tutorial will walk you through the process of building a Tetris game.
Build a Blog Page using HTML5 and CSS3
This tutorial shows you how to build a blog page using next-generation techniques from HTML5 and CSS3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.
Minimal Blog Design
In this tutorial you will learn how to create a Minimal Blog Design using HTML5, CSS3 and jQuery
Building a Custom HTML5 Video Player with CSS3 and jQuery
In this tutorial learn how to create a custom HTML5 video player with CSS3 and jQuery.