Home arrow HTML arrow 6 Great HTML5 Tutorials

6 Great HTML5 Tutorials

This article spotlights six great HTML5 tutorials that will teach you how to get the most out of your web pages. These how-to's showcase methods to create your own mobile HTML5 app, work with forms, blogs, and videos, and give you an overview of the markup language in general.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 23, 2011

print this article

This article spotlights six great HTML5 tutorials that will teach you how to get the most out of your web pages. These how-to's showcase methods to create your own mobile HTML5 app, work with forms, blogs, and videos, and give you an overview of the markup language in general.

What is HTML5 and why we should all care

While most tutorials show you the different steps to complete a certain task, this one offers a solid overview of HTML5 that you should read before you jump into the language.  The tutorial first breaks down what HTML5 is.  Then it goes into explanations of the canvas element, video features, geolocation, and offline web applications.  HTML5 gets broken down even further with some short explanations of its other features too.  There's also a nice comparison of HTML5 versus Flash in terms of cost, efficiency, effects, and which is more widely accepted.  Perhaps the best part of the entire tutorial is its format.  Everything is listed in a clear and concise manner, with color coded graphics that are user-friendly.  In short, if you want a quick look at HTML5 to familiarize yourself with the language, this is not a bad place to start.

Link: http://www.focus.com/images/view/11905/

How to make a HTML5 iPhone app

Here's a tutorial that is useful if you were wondering how to make an app for the iPhone platform using HTML5.  The app in question is that of Tetris, a fun building block game that has been around for the ages.  The app is offline, meaning it looks and functions like a regular app, but will work even when there is no internet connection available.  The tutorial is not too long, and it guides you through each step of the process, such as the markup, CSS, JavaScript, and more.  Once you are finished going through all the steps, you will have learned how to make a simple offline app.  You won't have the skills to necessarily make more complex games or apps, but it offers a good starting point.  The use of HTML5 is also good if you tend to shy away from more complex programming languages.

Link: http://sixrevisions.com/web-development/html5-iphone-app/

How to build cross-browser HTML5 forms

Forms are such an essential part of almost any site, as they offer a way for your visitors to provide feedback, sign up for memberships, and more.  Cross-browser compatibility is another important issue as well.  This tutorial addresses both items, and it shows you how you can use HTML5 to create forms that work across different browsers.  As long as you have an hour of free time and some moderate knowledge of HTML5, you should be able to create forms for your site on your own after reading this tutorial.  Compatibility issues are at the center of the tutorial's focus, and it addresses any potential problems by providing fallbacks via CSS and JavaScript.  Tools such as Modernizer and Webforms are employed here, and so are the Slider, Numeric Spinner, Date Picker, and Color Picker widgets.  You'll also jump into various attributes by the time you are finished.

Link: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Designing a blog with HTML5

Blogs are popular and a great way for you to reach the masses in a rather informal style.  This tutorial shows you how to create using HTML5.  It begins by marking up the broad structure of the page using the header, footer, and nav structural elements.  The focus then shifts to the comments form.  Article elements and section elements are also touched on in the tutorial, as are times and dates.  You will get a nice discussion on how to properly lay everything out, so you should not have too many troubles in following the tutorial, even if you are a beginner.  The final thing worth noting is the anatomy of a blog post section, which shows you a graphical representation of a blog post's markup. 

Link: http://html5doctor.com/designing-a-blog-with-html5/

Create a grid based web design in HTML5 and CSS3

Both HTML5 and CSS3 provide plenty of advantages when it comes to building a website, and this tutorial uses both.  You'll work on creating a sample website for a fictional eyewear company in this case using HTML5 for the overall structure and CSS3 for the styling.  The CSS3 allows you to implement some attractive, modern effects without the use of a ton of images, but you still get an end product that looks as if it came right out of Photoshop.

The tutorial kicks off with the site's design, and then moves into the HTML structure.  CSS styling comes next.  Overall, this is a good tutorial to help you improve your HTML5 skills, and the addition of CSS3 is a plus as well, especially if you want to learn how to implement eye-catching effects into your future site designs.  You won't necessarily learn how to make the most advanced website out there, but you have to start somewhere, and this is not a bad tutorial to do so.

Link: http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3

The video element

If you are interested in HTML5 and its video features, this tutorial will give you a comprehensive look that will give you a better understanding of how everything works.  The tutorial begins by showing a comparison of the size of old code compared with HTML5.  As expected, the difference is impressive in HTML5's favor.  Next, other attributes of the video element are covered, such as autoplay, download, autobuffer, controls, subtitles, and more.  Since video is such a powerful tool that can draw visitors to your site, this tutorial and its explanation of video via HTML5 is a must.

Link: http://html5doctor.com/the-video-element/

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All HTML Tutorials
More By wubayou

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials