Home arrow HTML arrow Page 2 - 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 - Four More
(Page 2 of 2 )

How to create a drop down menu with HTML5, CSS3, and jQuery

Drop down menus are a great way to make your site's navigation functional but clean at the same time.  By reading this tutorial, you will learn how to create a drop down menu using HTML5, CSS3, and jQuery in very little time.  The example used in the tutorial uses various elements and styles, and it also offers fallbacks for older browsers.

How to draw with HTML5 canvas

Canvas is a HTML5 element that essentially allows you to draw using JavaScript.  While pixel-based, canvas does allow for some possibilities that can give you the power to increase the appeal of your site.  You can use it for charts and graphs, user interfaces, animations, and more. 

This tutorial takes canvas, introduces it briefly, and gives you instructions on how to implement it.  You'll start off with a basic drawing, then move into effects and transformations.  The tutorial also dabbles in animations, the display of non-standard fonts, and even embedded drawing applications that will let your visitors test out their drawing skills.

Link: http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

Canvas tutorial

Here's another tutorial that discusses the canvas element that is used to draw via JavaScript.  It's quite detailed, and is broken down into several sections.  Each section explains different ways to use canvas.  The tutorial begins with basic usage and drawing shapes.  It then delves into canvas' capabilities when it comes to using images.  You will also learn how to apply styles and colors, as well as how to deal with transformations.  Last, but not least, is a walk-through on animations.  The best part of the tutorial is how it takes each aspect or use of canvas and breaks it into its own separate section.  This allows you to digest the information easily.

Link: https://developer.mozilla.org/en/Canvas_tutorial

HTML5 apps: positioning with geolocation

Anyone looking at getting into the app development process should take a look at this HTML5 tutorial, especially if those apps are going to be location-based.  Considering how pretty much all smartphones now come loaded with GPS capabilities, using geolocation in apps is a smart idea. 

After reading this tutorial, you will know the ins and outs of HTML5's geolocation capabilities.  It's very detailed, and jumps into various topics on the subject, such as how browser geolocation works, how to use the getCurrentPosition API, what exactly geolocation data entails, how to display a map using geolocation data, and more.  There's no excuse to not use the benefits and technology that geolocation provides, so visiting this tutorial is a good first step at implementing it on your own projects.

Link: http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/


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.

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