HTML5 Live: A Sitepoint Course

About a month ago I enrolled on an online course organised by Sitepoint called ‘HTML5 Live’. The course was hosted by John Allsopp and I must say I’m really pleased I decided to sign up.

Course Overview

Firstly I was quite skeptical about doing an online course. I’d never done anything like this before and I was a little dubious at first for a few reasons;

  • I’d have to set aside an hour each day for a total of two weeks to carry out the course exercises.
  • I wasn’t immediately clear on how the course would actually work in terms of me accessing the content.
  • Could I afford to spend a total of 10 hours on this?

There were however a couple of big factors that made me want to take part in this course and take the risk;

  • It could be done at any time. Meaning I could work on the course last thing, before I finished up work for the day.
  • It was a Sitepoint course. I’ve been a forum member for a while and quite often read their articles / blogs and even their books.
  • HTML5 is the future and this would be a great way to learn more about it and get my hands dirty rather than just reading endless articles about it.

So with that in mind I signed up and waited eagerly to get started. Once I’d signed up I was given access to an online ‘portal’ reserved only for members of the course. There was a forum for discussion on each lesson that was posted and the video lessons from John Allsopp were really easy to follow, clear and concise. The fact that the exercises John set involved working with actual code, and that they were similar to what us designers/developers do from day to day really made the learning process so much easier too. I learnt sooooo much during this course! So with that in mind, here’s a quick overview of some of what we covered. I hope to go into more detail regarding some areas in another blog post;

Doctype & Charset

Pretty basic, but important nonetheless. We looked at how to actually declare in our HTML files that we were using HTML5 with the revised much simpler HTML5 doctype. I also learnt a little more about using the correct ‘charset’ (character encoding) for HTML5 documents and its importance.

Structural Elements

One of the many exciting new features of HTML5 is the ability to use structural elements in our code. So rather than just having ‘div’ tags with css classes and id’s applied to them, we can now make our code much more semantic. For example, rather than having a ‘div’ with a class of ‘nav’, which would mean nothing to someone using a screen-reader lets say, we can specifically state that this part of our document contains our navigation by containing it with <nav></nav> tags. Here are some of the structural elements I worked with whilst doing the HTML5 Live course.

  • <header> – this is used to contain the header elements of our document.
  • <hgroup> – the hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.
  • <nav> – used to tell the document that what’s inside this tag is our navigation.
  • <aside> – typically used to mark up sidebar content, but can also be used on other content – perhaps some text which is an ‘aside’ to the main content. Context plays an important part with this one and you can read more about that on the HTML5 Doctor site.
  • <section> – used to mark up different areas/sections of the page. Again this one is more tricky to get your head around and was subject to great debate during the HTML5 Live course. You can read more about it on the HTML5 Doctor site.
  • <article> – think of this as something that would surround a blog post  – repeating content if you will.
  • <footer> – used to mark up the content at the very bottom of our document.

The fact that we can now use these elements with HTML5 is really exciting. It should without doubt mean the start of a much more accessible web.

Web Forms

There’s some exciting new features we can use with our forms with HTML5 to make them much more semantic. We can specify what type of form fields we’re adding to a document. For example a telephone number form field can be given the following type="tel" so that it knows what type of content its going to be accepting. The same goes for URL and email. We can also mark up date selection fields much more successfully and even add sliders to forms that before we would need to use JavaScript to accomplish. Adding placeholder text to a form field is also much more easy to achieve in HTML5, whereas before we’d need to look at using more Javascript to achieve. Those are just some of the new features for web forms. If you want some more info then check out this 24 Ways article. Although a little dated now it’s still very useful.

Native Video & Audio

Pretty exciting is the ability to add native video and audio to our webpages with HTML5. Audio code looks something like this; <audio controls> <source src="files/lesson6.mp3" type="audio/mpeg"> <source src="files/lesson6.ogg" type="audio/ogg"> </audio> And video code like this below. You’ll notice the fall back flash content if the user is viewing the page in a browser not capable of rendering HTML5, ensuring the code degrades gracefully; <video style="height:700px; width:700px;" autoplay controls poster="http://1.sitepointstatic.com/frontpage/images/logo.png"> <source src="files/video.mp4" type="video/mp4"> <source src="files/video.ogv" type="video/ogg"> <!-- Fall Back Content --> <object width="160" height="90"> <param name="movie" value="files/video.swf"> <embed src="files/video.swf" width="160" height="90"> </object> <!-- END Fall Back Content --> <p>Sorry, still no browser support!</p> </video> I can tell you that when I got this working for the first time there was something really amazing about watching a video play or hearing some audio directly in the browser using HTML5. Give it a go yourself and see what I mean!

Canvas

Canvas allows us to draw with code using coordinates. All you do is create a canvas, like so, with some fallback support just in case; <canvas id="myCanvas"> <p>Sorry, still no browser support!</p> </canvas> And then use Javascript to actually draw onto that canvas; <script> // declare the two variables at once using a comma var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"); // now you're ready to draw </script> John Allsopp the course host even created this cool little tool which you can use to get started with canvas. It’s even got a cheat sheet with it so it’s very easy to get started. Although you’ll probably only be drawing and filling basic shapes there is a fair amount of potential waiting to be unleashed!

HTML5 Today – Dealing with browser support

What was fantastic about the end of the course was that John took time to explain what parts of HTML5 we could use safely today, and also a few ways we could make browsers that don’t currently support some elements of HTML5 (IE6, I’m looking at you!) play nice. I’d really recommend checking out 4 of the videos in that lesson if you want to find out more about using HTML5 today;

HTML5 Live Conclusion

Overall the Sitepoint HTML5 Live Course was nothing short of brilliant and I wouldn’t hesitate to take part in another one. For $9.95 it was incredibly good value as the tutorials / lessons were in clear video format and I can still access all the course material (including articles written especially for the course) on the Sitepoint site. I believe some more of the videos are available on YouTube too if you want to check those out. Taking part in the course has certainly helped me and I’ll definitely be trying out HTML5 on a personal project I’m working on. I hope this article has perhaps inspired you to start tinkering with HTML5 if you haven’t already.

Resources
Tweet Share

What is Schema and how do I use it?

How we optimised load time on an image heavy WordPress website

Google ranking algorithm changes to affect non-mobile friendly websites

How can we help?

Find out how we can help you.

We'll keep your details extremely secure and will never spam you.
Get your FREE guide

10 Simple Ways to Get Traffic to Your Website

Download it now
Download this resource

Great decision! All you need to do is enter your name & your email address into the form below. You'll also be able to download all our other free guides too!

We'll keep your details extremely secure and will never spam you.

Interested in talking to us about a project, or just want to say hello? Use the form below and we'll get back to you.

Thanks Your Name here

We'll be in touch shortly