Teach Yourself HTML5 in 24 Hours—Examples


Here are all the examples I’ve put up for the book, by hour.

Hour 1: Improving Mobile Web Application Development with HTML5

Hour 2: New HTML5 Tags and Attributes with Mobile Development

All the tags discussed in this hour will have examples covered from their specific hours.

Hour 3: Styling Mobile Pages with CSS3

Hour 4: Detecting Mobile Devices and HTML5 Support

Hour 5: JavaScript and HTML5 Web Applications

Hour 6: Building a Mobile Web Application

Hour 7: Upgrading a Site to HTML5

Hour 8: Converting Web Apps to Mobile

Hour 9: Adding Meaning with HTML5 Sectioning and Semantic Elements

Hour 10: Drawing with the HTML5 Canvas Element

Hour 11: Fonts and Typography in HTML5

Hour 12: Audio and Video in HTML5

Hour 13: HTML5 Forms

Hour 14: Editing Content and User Interaction with HTML5

Hour 15: Microformats and Microdata

Hour 16: Working with HTML5 Drag-and-Drop Functionality

Hour 17: HTML5 Links

Hour 18: Web Application APIs and Datasets

Hour 19: WebSockets, Web Workers, and Files

Hour 20: Offline Web Applications

Hour 21: Web Storage in HTML5

Hour 22: Controlling the Browser History with the History API

Hour 23: Adding Location Detection with GeoLocation

Hour 24: Converting HTML5 Apps to Native Apps

No examples for this hour.

2 thoughts on “Teach Yourself HTML5 in 24 Hours—Examples

  1. Hi Jennifer,

    I am a middle-aged traditional software developer (VB,C#,etc…) of about 20 years, who has returned to graduate school. Before returning to school, I had done very little “web/html” development – worked on one project using Microsoft’s active server pages; and created a few web services for intranet usage. Upon reading about the new features of HTML5, I purchased your book ‘HTML5 Mobile Application Development’ over the winter break 2012/2013 since HTML5 seemed to address issues of cross-platform mobile development. So my first attempt of a small app was for a class project last spring, in which I built a simple prototype consisting of a series of html pages that referenced each other – again very simple. Now this semester, I have designed a more complex application prototype in which I am utilizing a few more features of HTML5 and javascript but still very simple. One of the features I do like about this type of development is the ease development in a local environment – code, save local, then open from a local browser(Chrome in my case). But I have hit a snag trying to get cookies to work, or at least being able to fully test by only opening the html file on my local computer – which is currently running Windows Vista Home. From the Hour 5 examples from http://www.html5in24hours.com/the-book/examples/, I have copied the entire content of the Simple JavaScript example and pasted in my own html document, then using Chrome on my computer I simply open the html document from my harddrive. All of the other features work as they work when executed from your site except checkCookie() which the alert() returns “Cookie is: null”. I think my account is locked at my website from school so I haven’t been able to upload my copy of your example to my website to see if the code will work once executed from an actual webserver instead from my harddrive, so can you tell me what component is not working?

    The feature I need to do is save a value in one html page then be able to access that value from another page. Since I don’t think I can use the get/post methods between html pages saved on my local harddrive, or at least I wasn’t able to get get/post to work testing locally from harddrive to browser, I thought the simplest thing to try was using a cookie. I guess the next step is to try using web storage?

    Thank you for any help you can provide. Debugging has been one of the more frustrating tasks so far in html5 development since no real error messages are returned.

    1. Cookies don’t always work on local pages, so to test them, you’ll need to upload your pages to a web server. If it still doesn’t work on the web server, then the problem may be the amount of data you want to store. Most browsers only support around 4900 bytes in a cookie. If you need more than that then you’ll have to use web storage.

      Debugging is difficult. The best solution I can offer is to add alert messages into your JavaScript. When I’m testing I will often pop up multiple alerts that just have text saying where it is in the script execution, just so I can see what’s happening.

      Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *

twelve − ten =