Feb 23 2011

HTML5 Tutorials and Techniques That Will Keep You Busy

Advertisement

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!
[fblike]

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

Have a Field Day with HTML5 Forms
This is a perfect tutorial with advanced CSS techniques which will help you design beautiful HTML5:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

Blowing Up HTML5 Video
This tutorial is about a blowing up HTML5 video and mapping it into 3D space. Check it out:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

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:

Screenshot

Structural Tags in HTML5
The HTML5 specification has added quite a few interesting and useful tags for structuring your markup:

Screenshot

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:

Screenshot

Rethinking Forms in HTML5
More usable web applications with less code and less confusion can be created easily. Click here to find out how:

Screenshot

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!

(ik)
[fblike]

About the Author

Aquil Akhter is a web graphic designer and has been working in this field for 8 years. He also runs the blog webdesigncore.com, which focuses on free web resources and inspiration for designers and developers.

Comments and Discussions
  • Ralph, 23 February 2011

    Your summary is amazing. There are so many, many links and much more ideas around html 5 and css 3.

    Thank you a lot for your work.

  • Vaibhav, 23 February 2011

    nice one Noupe – thanks!

  • gourav, 23 February 2011

    very nice html tutorials….tnks for sharing it

  • Robert, 23 February 2011

    So it’s true HTML CAN BE BEAUTIFUL! I remember all those 96′ style html websites that used tables and frames. Look how far we’ve come.

  • Chris Amling, 24 February 2011

    HTML5 seems to be everywhere now, thanks for the list of resources. I just am starting to make sites with HTML5, say goodbye to the all powerful div tag.

  • Rana Mukherjee, 24 February 2011

    Nice resources.

  • Qamar, 24 February 2011

    HTML5 is really powerful. Thanks for sharing.

  • Ionut, 24 February 2011

    Very nice Tutorial and examples.
    Will definitely take a look through all the websites linked here.
    Thanks for sharing NOUPE!.

  • Bogdan Pop, 24 February 2011

    Glad to see one of my tutorials got featured. Thanks!

  • Jaspal Singh, 25 February 2011

    HTML5 – I’m loving it.
    Thanks for sharing html5 tutorials and techniques.

  • James Williams, 28 February 2011

    Hi,,,
    This is very good post for the new developers. Website is also very powerful tool as compaire to the advertising. Now a days in business point of view website are best tool.

  • Robert Mcfarland, 01 May 2011

    hello blogger, i’d been reading your posts on HTML5 Tutorials and Techniques That Will Keep You Busy – Noupe Design Blog and i really liked them. one thing that i noticed while browsing throughout your blog that some of the links aren’t working and giving error. this makes the reading experience a bit sour. you have a nice blog and i will request you to update the hyperlinks so that fascinated individuals can get all the info they want to have. Btw are you on twitter?? i would definitely like to follow you and get up-dates in your blog.

  • Aneek Mukhopadhyay, 21 October 2011

    First, nice list of tutorial about HTML5 and CSS3. But the nettut tutorial was paid version. Anyway, good to have it in my bookmark. I am also developing my website in HTML5 and CSS3.

    Thanks.. and keep the beautiful blogs coming..

  • Way2Geeks, 03 December 2011

    Very nice tutorial…Thanks for sharing..

  • tessekkur, 01 March 2012

    Really nice compilation!
    Thank you!

  • Will, 24 September 2012

    Great tutorials! We have learnt a lot in the past year and that is why new software has been introduced to the market. These tutorials help to work with these programs: http://www.a5-animator.com/Pages/Tutorial_7

search form
 
image description image description