Web Design Courses

"A refresh and update of my existing HTML and web development skills to begin developing in HTML5. Excellent content and delivery." - A. Columbine

Home > Web Design Courses

Developing Content with HTML5 (2 days)

This two day hands-on HTML5 course is for those that want to use HTML5 specific features to improve their website's semantic support. The course is useful for developers who have previously worked only with older versions of HTML.

This course includes

• 2 days trainer led in small groups
• Your own printed course manual
• Course files & exercises to take away
• Choice of PC or Mac for training
• Professional environment with high spec computers
• Refreshments throughout the day
• Lunch provided
• Printed course certificate
• Post course support via email
• Access to our FREE workshop days

HTML5 Overview

The HTML5 specification, although not yet complete and not fully supported by all browsers, does provide enough detail for web designers and web developers to start using it. This course's primary focus is on the current implementation of the W3C and WHATWG standards and what we can start to use to future proof our web projects.

The benefits that HTML5 already bring can be seen by how quickly the web development community has adopted the standard and how they've already implemented workaround solutions for browsers without HTML5 support.

Course Outcomes

By the end of the HTML5 course students will understand how to deploy HTML5 based content and be able to use the new tags, methods and features to do the following :

• author accessible valid HTML5 documents
• provide workarouond solutions for non-HTML5 browsers
• create enhanced forms with mobile support
• playback video and audio content via HTML5
• manipulate graphics via the canvas
• understand what HTML5 will be capable of in the future

Course Requirements

To attend this course, you should already be able to build websites by hand. This is not an introduction to web design course, but a course to upgrade those that can already build websites to the HTML5 specification. It is recommended that if you do not already hand code websites, that you look at our HTML & CSS Web Design course.

The HTML5 training course covers everything that is needed to build valid HTML5 compliant web pages. As a basic requirement, students should already have some experience hand-coding HTML v4.0 or XHTML web pages and understand CSS layout. Knowledge of JavaScript would be a distinct advantage although is not required.

A course primer document will be sent to all students attending this course. This will provide you with some basic knowledge of JavaScript to help you get the most from the HTML5 course.

Course Description

This HTML5 training course starts with an overview of the standard and existing support with the major mobile and desktop browsers - Firefox, Safari, Chrome and Internet Explorer. There is often confusion defining what is and what is not HTML5. We will explain why it is important to understand which technologies are covered by the HTML5 standard and which are parts of other standards such as the CSS3 specification or libraries such as jQuery.

As part of simplifying the HTML5 document structure and making it more semantic, certain existing HTML tags have be modified and others deprecated from the new specification. The course clarifies what is no longer allowed and how to modify existing web pages to comply with validation engines. Thankfully a lot of the changes do help improve development speed and workflow.

A major attraction of HTML5 is the new semantic outlining model. For the first time it is possible to create documents with structure and association beyond that of simply nesting headings. The header, nav, section, article, aside, footer tags all bring meaning to the content which can be appreciated by search engines (for search engine optimisation) as well as accessibility agents such as screen readers. The focus in this section of the course is to get you comfortable building semantic structured content that will improve the performance of your pages and validate against the HTML5 specification.

While implementing HTML5 today is an attractive proposition, we still need to consider those browsers with no HTML5 support. These are typically browsers that are still in mainstream deployment such as Microsoft's Internet Explorer 6 - 8 and older versions of other browsers. Through libraries such as HTML5Shiv and Modernizr we will look at providing some backward compatibility so that we can start benefitting from HTML5 right now. We will also look at the implementation of the HTML5 Boilerplate project and how this may help improve our workflow.

Next, we will look at enhancing web based forms using the plethora of new input types and functionality available in HTML5. There are now form controls for a number of common data entry fields such as email addresses, telephone numbers and dates as well as built-in form validation as part of the specification. Using these new features we will create forms with fallback mechanisms through the webforms2.js and jQuery UI libraries so that they can be used in any of today's browsers.

One of reasons that HTML5 has become so important in modern web development is it's native support for video and audio playback. This has long been an issue for Apple iPhones, iPods and iPads who have not supported the Adobe Flash player. HTML5 browsers no longer require the Adobe Flash player to stream video and audio content. As part of the training course we will look at the H.264, Ogg and WebM supported media formats, encoding these files and playing them back natively within supported browsers. Of course, for those browsers without native support, we will look at how to fallback to Flash for playback support. We will also cover building your own simple custom media controls with jQuery (or JavaScript).

For those who are looking for an early replacement to Adobe Flash or just looking to get into creating dynamic graphical content, HTML5 has the new canvas tag. The HTML5 canvas provides mechanisms for drawing and manipulating shapes, lines, text , patterns and even video. With the ability to apply shadows and gradients it is possible to create dynamic interactive content and animation through the canvas with a little help from jQuery (or JavaScript). Although working with the canvas does require good knowledge of JavaScript, it will be presented in such a way that even those without any programming experience will feel comfortable.

Finally, the training course takes an overview look at some of the other APIs often related to the HTML5 specification. Although some of these have not been fully finalised yet, the course plans to share with you what these APIs are capable of and what support exists for them. Most interestingly is the GeoLocation API which allows supported browsers to identify the global location of the user via mobile GPS or IP address and use this information as part of the page. We also overview the Web Storage, and Drag and Drop APIs.

Course Highlights

The course covers the following areas :

• HTML5 Standards
  • Moving to HTML5
  • Current Browser Support
  • Technology Support
  • W3C and WHATWG Specs
  • HTML5 Specification Overview
  • What HTML5 is not
• HTML5 Document Structure
  • The new DOCTYPE, charset and metatags
  • Attributes in HTML5
  • Deprecated tags and attributes
• HTML5 Content
  • The HTML5 outline model
  • New Structural Tags (header, nav, section, article, aside, footer)
  • Headings and Content (hgroup)
  • New Semantic Tags
  • Link Relationships
  • Working with HTML5 Outliner
  • HTML5 Validation

• Browser Compatibility
  • Block level behaviours
  • HTML5Shiv
  • HTML5 Boilerplate
  • Detecting Browser Support
  • Modernizr
• HTML5 Forms
  • New input types
  • Form validation
  • Required fields
  • Placeholder Data
  • Fallback with WebForms2 & jQuery
  • Building practical HTML5 Forms
• HTML5 and WAI-Aria
  • Understanding Accessibility
  • Using the role Attribute
  • Using the aria- Attribute
  • Form Accessibility

• Video and Audio Tags
  • Browser Compatibility
  • Media formats - H.264, Ogg, WebM
  • Encoding video and audio
  • Preloading and Poster Frames
  • Fallback content with Flash
  • Creating simple custom controls
• HTML5 Canvas Tag
  • Canvas methods and properties
  • Drawing context
  • Drawing lines and shapes
  • Saving and Restoring States
  • Colour, Patterns and Gradients
  • Applying Shadows
  • Clipping Content
  • Setting Alpha Transparency
  • Transformations
  • Creating simple animation
• HTML5 Related APIs
  • Overview of the GeoLocation API
  • Overview of the Web Storage API
  • Overview of the Drag & Drop API

Course Feedback - 5.0 out of 5.0 stars

"The more practical parts (Canvas/audio/video) - Very useful a - gained alot of knowledge" - Sam @ Regatta

"The way that the course was delivered and the open environment that allowed for questions to be asked. Also the ability of the trainer to demonstrate things on the spot - This course has shown me how to develop in html5 and also understand the structure and accessibility of the language, also shown me where i can improve sites that i have already build in html5." - Matt @ Warners Group Publications Plc

"Group numbers kept small enabled plenty of interaction and one-to-one tutoring. Felt the course was delivered at a pace to suit everyone. - This course was exactly what I was looking for a refresh and update of my existing HTML and web development skills to begin developing in HTML5. Excellent content and delivery. Also accessibility and validation were covered very well." - Andy @ Linney Design

"Well paced, well structured delivery. - This course provides a solid foundation to use the learnings in developing websites. The mixture of demonstrations, exercises and support material was weighted very well." - James @ University Hospitals Birmingham Nhs Foundation Trust

Course Trainer

Bjorn has been involved in CSS based web design for nearly 20 years and has experience developing web applications in both small and large teams of developers. Having insights into both the design and development worlds, he is able to understand the capabilities of design packages such as Illustrator, Animate CC (was Flash) and Photoshop as well as develop with server side platforms such as PHP. Combing these two worlds through the use of hand written markup and CSS is something he excels in and has been teaching these skills to other developers for over 15 years.

Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.

Course Location

This HTML5 training course is run from our rooms on Jubilee Campus in Nottingham, which is part of the University of Nottingham's Innovation Park. These are serviced by a state-of-the-art tram system allowing easy access to the city centre as well as direct hourly rail services from London, Liverpool, Manchester, Birmingham, Derby and Leicester.

Please note that all course prices exclude VAT.