Home arrow HTML arrow Top HTML5 Tutorials

Top HTML5 Tutorials

HTML5 is loaded with useful features to help you max out your web site's look and functionality. If you are new to or unfamiliar with HTML5, however, you will probably need some pointers on how to reach its full potential. Here are some tutorials that can help you get your feet wet and experience what HTML5 has to offer.

Author Info:
By: wubayou
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
May 18, 2011
  1. · Top HTML5 Tutorials
  2. · Four More

print this article

Top HTML5 Tutorials
(Page 1 of 2 )

Create modern websites using HTML5 and CSS3

A quick and concise tutorial this is not.  In fact, you should read this particular tutorial by IBM when you have a good amount of time on your hands to digest the information.  It introduces you to HTML5 and CSS3 by offering lengthy explanations on new features.  Once you have an understanding of the features, the tutorial then showcases how to create a sample page that employs many of the items that were introduced. 

You'll learn about HTML5's semantic elements, web form enhancements, features such as drag and drop, geolocation, and more.  You'll then be taken on a journey through CSS3's new features, such as selectors, effects, etc.  The basic HTML5 page structure will be explained, and you will see how to implement the features on your own.  For example, you will be taught how to add a video to a page, as well as how to add a web form.  Those are just two examples of what is included.  If you are looking for a very detailed explanation and introduction on HTML5 before you jump into action, this tutorial offers that and more.

Link: http://www.ibm.com/developerworks/web/tutorials/wa-html5/

Simple website layout tutorial using HTML5 and CSS3

The value of this tutorial comes from its simplicity.  It offers a solid framework for anyone looking to create a simplified website layout on a beginner's level.  Think of it as a nice introductory tutorial to the world of HTML5.  You'll get a decent amount of practice in working with HTML5 tags for the layout, while the site's styling is applied using CSS3 via rounded corners and text shadows.  Short and sweet, this tutorial is a good choice for someone who wants to jump into HTML5 without having to read any extraordinarily long explanations.

Link: http://www.designzzz.com/website-layout-tutorial-html-5-css-3/

Create an elegant website with HTML5 and CSS3

If you like extremely detailed tutorials, it's hard to beat this one.  It's main focus is to teach you how to build an eye-catching website using HTML5 and CSS3.  Before it gets into the techniques, you receive a nice overview on both HTML5 and CSS3.  Once that's finished, it's on to the actual creation process.  You'll see an overview of each and every step you need to create a site, even beginning with the preliminary sketches on paper.  There's also a discussion that addresses cross-browser compatibility issues.

Link: http://www.pvmgarage.com/2010/04/touch-the-future-create-an-elegant-website-with-hmtl-5-and-css3/ 

Have a field day with HTML5 forms

While many people may dread the tasks of creating markup for and styling forms, it does not have to be such a painful process.  This tutorial is a perfect example of how styling forms can actually be fun. 

There's no doubting the importance of forms on a website, as they offer ways for visitors to offer feedback and other forms of input.  For this reason, you should learn to immerse yourself in their creation, and not shy away from them.  The example used in the tutorial is of a rather in-depth payment form, but once you learn the basic techniques, you will be able to create HTML5 forms to suit a wide variety of purposes.

Link: http://24ways.org/2009/have-a-field-day-with-html5-forms

Create a stylish contact form with HTML5 and CSS3

Here's another HTML5 tutorial that centers around forms.  A contact form is an essential way for visitors to contact you, and this tutorial shows you how to create one that offers basic functions in fashionable layout.  The form is created entirely from HTML5 and CSS3.  The CSS3 properties employed help to create the cool look of the form, while the HTML5 features aid in providing the platform for functionality.  Gradients, highlights, and shadows are all used to give the form qualities that are easy on the eyes.

Link: http://line25.com/tutorials/create-a-stylish-contact-form-with-html5-css3

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials