 |
Ever since the latest revision of HTML has launched, internet marketers have switched to HTML5 due to its several new features which facilitate Web development distinctly. It has opened new doors to designers and developers and as you may have already noticed, the use of Flash in Web and internet applications has significantly dropped. In today’s post, we’ve gathered some very useful tutorials that will help you achieve a good command of HTML5. Please feel free to share with us other useful tutorials that have kept you busy!
HTML5 Tutorials and Techniques
Designing a Blog With HTML5
HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages; let’s look at how to mark up a blog:
Code a Vibrant Professional Web Design with HTML5/CSS3
In this Web design tutorial, we will convert the vibrant and professional design with the help of HTML5 and CSS3:
Implementing HTML5 Drag and Drop
One of the new features in HTML5 is native drag and drop. In this tutorial and screencast, we’ll look at how to implement native drag and drop to build a simple shopping cart interface:
How to Build Cross-Browser HTML5 Form
In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins:
HTML5 Apps: What, Why, and How
There are some things you should know about HTML5. In this tutorial, you will learn some very important basics:
Coding A HTML 5 Layout From Scratch
In this article you will learn, how you can use refined degradation techniques and technologies to put things in place for legacy browsers:
Simple Website Layout Tutorial Using HTML 5 and CSS 3
The Most prominent additions in HTML 5 are tags like header, footer, aside, nav, audio etc. Read here to find out more:
One Page Website Template
In this tutorial we are going to make a HTML5 web template, using some of the new features brought to you by CSS3 and jQuery, with the scrollTo plug-in:
HTML5 and CSS3 Without Guilt
Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age:
Hybrid Column Layout
Have you done a website with fixed columns? What about one with liquid columns? Read on to find out how:
Building Webpages with HTML5
To help make some sense of what’s new in HTML 5 in this article, we’re going to dive right in and start using some of the new structural elements:
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:
How to Make an HTML5 iPhone App
Here you can learn how to create a native app that exists with many other apps with the help of HTML5, CSS and JavaScript:
Have a Field Day with HTML5 Forms
This is a perfect tutorial with advanced CSS techniques which will help you design beautiful HTML5:
Bouncing a Ball Around with HTML5 and JavaScript
This guide will explore the use of HTML5′s canvas element through a fun example by creating a bouncing blue ball:
HTML5 Canvas Element Guide
In this guide, we hope to get you started on understanding the canvas element and what kinds of things are required and expected in its associated code:
Create an Elegant Website With HTML5 And CSS3
In this article, Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm:
Blowing Up HTML5 Video
This tutorial is about a blowing up HTML5 video and mapping it into 3D space. Check it out:
Comprehensive Video Tutorial on HTML5
This is a video put up by a Google Employee called ‘Brad Neuberg’ to provide us with an educational introduction to HTML5. This is for the people who don’t find time to keep up with HTML5 developments by reading articles:
Creating an Ad in HTML5
HTML5 is an evolving standard competing with Flash for next generation web technologies. One of the prominent usage of Flash is animated and interactive advertisements. Read here to find out more:
Another HTML5 Tutorial from Brad Neuberg
Brad Neuberg explains why HTML5 matters – to consumers as well as developers! He also shares the practical implications of the changes that are coming along with HTML5 support in modern browsers:
Code a Backwards Compatible, 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. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural:
Create Modern Websites Using HTML5 and CSS3
This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table:
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3:
How to Draw with HTML 5 Canvas
Among the set of goodies in the HTML 5 specification is Canvas, which is a way to programmatically draw using JavaScript. Read here to find out more:
The Video Element
The video element is brand new in HTML 5 and allows you to play a movie within your website! The data of this element is supposed to be video but it might also have audio or images associated with it:
Building a Live News Blogging System in PHP Spiced Up with HTML5, CSS3 and jQuery
In this tutorial we will be building a live news blogging system in PHP. Another tutorial worth checking out:
Combining Modern CSS3 and HTML5 Techniques
Just because some techniques don’t work in the decade of old browsers doesn’t mean that you shouldn’t be learning everything you can. Well said:
WebOS HTML5 Database Storage Tutorial
If you haven’t been able to find any tutorials on HTML5′s storage capability, you’re not alone. Here’s the first webOS / HTML5 database storage tutorial:
The Official Guide to HTML5 Boilerplate
In this screencast, Paul Irish meticulously reviews each page, and then further goes on to explain why and when you would use each snippet in your projects:
How to Create a Cute Popup Bar With HTML5, CSS3 and jQuery
Here we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). This has only been tested in Chrome and Safari and may not work in other browsers:
An HTML5 Slideshow w/ Canvas & jQuery
All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Here we’re going to create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well:
Structural Tags in HTML5
The HTML5 specification has added quite a few interesting and useful tags for structuring your markup:
Designing Search Boxes with HTML5 and CSS3
The ‘Search’ box is one of the most important parts of any website. Here you can learn some practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality:
Rethinking Forms in HTML5
More usable web applications with less code and less confusion can be created easily. Click here to find out how:
Useful Articles and Resources
- HTML5: The Facts and The Myths
Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today. - The Only HTML5 Resources You Need for Getting Up to Speed
What is HTML5, really? How will it change the jobs of web developers and web designers? Here are 15 web resources to help you on your quest. - 23 Essential HTML 5 Resources
Everyone is excited about the possibilities of HTML 5, but there’s a lot to learn and absorb as well. With that in mind, Ryan Carson have compiled a list of articles to get you started!
- Learning to Love HTML5
The good stuff in HTML5 has been discussed pretty solidly in a number of sources including books by Bruce Lawson, Jeremy Keith, and Mark Pilgrim, to name a few.
(ik)