Teach Yourself HTML5 in 24 Hours—Code Samples

Code Samples

The code samples in the book are all available online for you to copy and paste into your pages to try out.

Hour 1: Improving Mobile Web Application Development with HTML5

Hour 2: New HTML5 Tags and Attributes with Mobile Development

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

There is no code in this hour.

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

19 thoughts on “Teach Yourself HTML5 in 24 Hours—Code Samples

  1. Good book but lots of errors in the examples. Perhaps its teaching me to take a closer look – but can be frustrating none-the-less…

    Coding example for page 76 Form validated with JQuery is missing a closing bracket ‘)’ for the Document Ready function.

    1. @Deon Lengton: That sucks! I’ll get that corrected as soon as possible. I hope if you find other errors that you’ll let me know. The book was tested by me and two technical editors, but even after all that, errors can creep in. It’s always a good idea to look closely at whatever you’re doing.

    2. @Deon Lengton:

      Hi again,

      So I went to that page and here is the document ready function (copy pasted from the text of the ebook):
      $(document).ready(function(){
        $(“#link1 img”).hover(
          function() {
            this.src = this.src.replace(“_off”,”_on”);
          },
          function() {
            this.src = this.src.replace(“_on”,”_off”);
          }
        );
      });

      I checked in my IDE and all the brackets show up. But what I did notice was that some of the quotes were entered as curly quotes rather than straight quotes. So if you copy pasted the code directly from the book (not from my example pages, but from the book text itself) you may have ended up with curly quotes in there by mistake.

      Unfortunately this is a very very common problem with programming books. It’s hard to tell when you’re editing and I made dozens of notes to my editors to make sure they use straight quotes in the code samples, but Word and other tools tend to “help” by adding them back in when you aren’t looking. It’s frustrating. 🙂

  2. I tried the canvas example, and everything I kept on trying failed in Safari and Firefox. How could such a simple 1st entry in the book be so error prone? I came here for an errata, and found none. This is what I have:

    function drawSquare () {
    var canvas = document.getElementById(‘simple-square’);
    if (canvas.getContext) {
    var context = canvas.getContext(‘2d’);
    context.fillStyle = “rgb(13, 118, 208)”;
    context.fillRect (2,2,798,798);
    } else {
    // put code for browsers that don’t support canvas here
    alert(“This page requires an HTML5 compliant browser to render
    correctly. Other browsers may not see anything.”)
    }
    }

    My HTML 5 2-Column Page

    My HTML 5 2-Column Page

    Home
    Products

    Lorem ipsum

    © 2013 EB

    1. Found the two errors. Just to note, the curly braces on the alert I added in later when I copied code. They should be straight quotes. The real error here is that you need to add the (); after the onload=”drawSquare” to get the sample to work (onload=”drawSquare();”).

      Also, it may help if you are consistent with the use of single and double quotes in your code. The sample is loose with these, and while they may be the same, there is no clear indication of this here. The sample you include here is all styled, so if one were to copy the one you have here, which uses open and closed quotes, none fo this wold work.

      1. @EB:
        Thanks for the update. I’ll do a search for “drawSquare” in the book text. It helps, if you find further errors, to let me know the page number (in a physical copy of the book) or the Example number or other identifier (like the nearest Figure number or even just the chapter number and section name).

        Thanks again for taking the time to report this.

    2. Hi EB,

      “The canvas example” is not really enough information for me to find what you’re talking about and check/fix errors, but I am going to try and find it and fix it if I can. Thanks for the report!

      As for how errors creep in, well, that’s easy to explain (well, not easy, but…). Here’s the process I do when I write:

      1. I write the contents and decide where I want to have examples.
      2. I write the examples in HTML and test that they work in my web browsers (on Mac and Windows as well as Android and iOS).
      3. Once the examples work correctly for me, I copy and paste the HTML into the book text.
        Errors can enter here if I paste the HTML wrong, but I try very hard to paste only the working HTML.
      4. The book is then reviewed by two or three technical editors who are asked to test all the examples in their browsers (and some of them do and some of them don’t).
        Errors can enter here if a correction is made to the text that ends up breaking the example. Again, I and my tech editors try hard to avoid this, but it can happen.
      5. Then the book is copy edited and grammar/spelling/wording errors are found and fixed.
        This is another place where errors can creep in.
      6. The book text is then given over to the publisher to be formatted and printed (and published to ebook format).
        I don’t know how many steps this is, but basically any time the text is touched errors can be inadvertently added.

      I’m currently working on an update of the book for the enhanced ebook version (with videos). And once that is complete, I’ll be posting the errors I found and corrected here (for those with the older version). Any errors you find now I can correct for the enhanced ebook. I know they are frustrating, but all I can say is that everyone involved in this book is dedicated to creating as error-free a product as possible. I’m sorry if these errors are annoying to you—I can assure you that they are even more annoying to me. 🙂

  3. Sorry, I thought these comments were specifically for the page I was on (Chapter 2, figure 2.2). Also, the text I pasted in was seen as HTML, otherwise you would have seen the code (making it easy to reference the HTML). The errors were caused by multiple reasons:

    For one, when things failed for me I tried to copy your code sample for that chapter in (chapter 2, figure 2.2). Your code samples were not sent through a text editor to clean up for a browser. They have “smart” quotes in them, as in, open and close quotes. That is one of the failures.

    For another, the onload fopr the function requires (); after the function.

    lastly, your use of single and double quotes without an explanation leaves ambiguous the use. I have since realized they are interchangeable (are they?) but being consistent, or saying they are interchangeable, would have been nice.

    1. @EB:

      Heh, nope, I don’t have any idea what page you’re on. 🙂 I just see your comment. And your HTML was stripped out, so I didn’t see it either. Thanks for letting me know the chapter and figure. That’ll definitely let me find it.

      I write all my HTML in a text editor. The problem is when it was edited by other people other than me, their copies of Word would re-introduce the curly quotes. I was nearly tearing my hair out with this. My editing notes were sprayed with (more and more frantic) comments by me along the lines of “please use straight quotes in code samples”, then “I noticed more curly quotes in the code, they need to be converted to straight quotes”, to “OMG!!! GET RID OF THE CURLY QUOTES!!!!” 🙂

      It would be funny if it weren’t so sad.

      I’ve just posted a note on the blog about this, and as I mention there, I’m letting the publishers know about this problem. It’s a big one and really needs to be fixed in the ebook version.

      1. I’m not talking about copying it from the book, I am talking about copying it from your broken out text block on this web site in the code samples. And no, some are the right kind of quotes, and some are the begin and end quotes.

        Look, as a programmer who has been dealing with books and quotes for years and years where this issue may come up, I have not seen it in code samples on web pages, especially when they are broken out this way. Maybe the book is an excuse that can be passed on to editors (although I would assume that editors of technical books should know this,) but in the exercise samples we go to download?

        This problem is not going to show up for people who copy what they see in the book, as long as they use a text editor. It IS a problem for people copying from your web page, which I would imagine YOU have direct control over…

        1. Actually, in this blog post, I am speaking from personal testing just yesterday. I was alerted to the possible problem by your post, and when I copy pasted from the PDF file I found that the quotes were turned into curly quotes. So it is caused by copying from the ebook files into a text editor.

          I am also going through all the code samples here on the site again to make sure that if that happened in creating the code samples for the website that they are fixed. This is the first report I’ve had that the downloadable code samples themselves didn’t work.

          Please note, I’m not saying this to excuse the problems you’ve had. 🙂 I’m trying to figure out where the problem is happening and fix it. Thanks for your help with doing that.

  4. P.S. I copied the code sample when typing a variation out of the book failed. My variation initially only had the straight quotes. It was the missing (); that caused it to fail. When I tried a bunch of things and they did not work, that was when I copied your sample in. My assumption is that code in a box broken out from the text of your blog will have the correct quote types (straight quotes, not open and close quotes). These samples should all be cleaned to prevent that.

  5. SO the curly quote is still not fixed in the figure 2.2 sample code:

    context.fillStyle = “rgb(13, 118, 208)”;
    .
    .
    alert(“This page requires an HTML5 compliant browser …Other browsers may not see anything.”)

    Those both have opening curly quotes.

    If you are looking for anyone to beta try out the new digital version, I would really like to.

    1. P.S. Pasting the code into comment text made the closing brackets curly as well. The problem is only with the opening quotes in the actual code samples section.

  6. The code is fixed today. I assume copying code into where I am typing right now will once again place curly quotes in. Thanks for your help.

  7. I just received (today) the “Sams Teach Yourself Responsive Web Design 24 hours”.
    While in the intro, page 3, it says:
    this book has a companion website at http://html5in24hours.com, there is no data related to this very book???

    24 th december 2014,
    Montréal

Leave a Reply

Your email address will not be published.