0345 4506120

Learn HTML5: Platform-Independent Web Development with CSS3 and JavaScript

HTML5 empowers you to enhance the User Experience (UX) across all devices — from legacy desktop browsers, to the latest smartphones and tablets. In this training course, you gain the skills to apply best practices for HTML markup, CSS styling, and JavaScript programming, as well as upgrade web applications to improve site performance, accessibility, and Search Engine Optimisation (SEO).

Learning Objectives

You Will Learn How To

  • Leverage HTML5 to create modern, feature-rich sites
  • Improve SEO/a11y with semantic elements and microdata
  • Design professional, eye-catching presentations with CSS3
  • Program rich internet applications with JavaScript APIs
  • Enhance the user experience with drag-and-drop, Canvas, and SVG graphics, audio, and video

Pre-Requisites

Requirements:

  • Experience developing web pages with HTML and CSS at the level of:    
    • Course, Developing a Website
  • JavaScript experience is required

Course Content

Course Outline

Advancing Web Standards

  • Testing HTML5 with BrowserStack
  • Supporting legacy browsers with regressive enhancement

Improving Usability, Accessibility and Search Engine Optimisation (SEO)

Enhancing markup with new semantics

  • Upgrading pages to HTML5
  • Sectioning content with structural elements
  • Optimising page rank with microdata

Helping users with form completion

  • Guiding input with autofocus and placeholder
  • Validating data entry without scripting
  • Preventing errors with constraints and pickers
  • Customising error messages with the Constraint API

Enriching Site Design with CSS3

Manipulating borders and backgrounds

  • Vendor prefixes
  • Rounded corners
  • Resizable border images

Creating elaborate effects

  • Floating text and boxes with shadows and opacity
  • Animating transformations and transitions
  • Customising animations with @keyframes

Customising appearance across browsers

  • Installing downloadable fonts with @font–face
  • Hiding values in custom data–* attributes
  • Adapting mobile layout with media queries
  • Saving bandwidth with responsive images

Providing Relevant Content with AppCache, JavaScript and Geolocation

Enabling users to work offline

  • Defining an application cache manifest
  • Addressing caching caveats
  • Comparing AppCache to Service Workers

Programming the geolocation API in JavaScript

  • Estimating user latitude and longitude
  • Selecting content by proximity

Programming HTML5 Applications

Applying modern JavaScript best practices

  • Leveraging anonymous functions
  • Simplifying JavaScript development with jQuery

Persisting data with the Web Storage API

  • Saving name/value pairs in localStorage
  • Storing Complex data in JSON format

Enhancing forms with rich text and JavaScript

  • Testing and supporting features with Modernizr
  • Simplifying content formatting with WYSIWYG editors

Manipulating files with drag–and–drop

  • Handling events on draggables and drop targets
  • Enabling drag–and–drop file upload with HTML5 programming interfaces

Exchanging message data with JavaScript APIs

  • Posting messages across windows
  • Accessing external providers with Cross–Origin Resource Sharing (CORS) and XMLHttpRequest 2
  • Pushing data with WebSockets
  • Improving responsiveness with Web Workers

Drawing Dynamic Images

Filling the Canvas element

  • Eliminating plugin dependencies with native graphics
  • Charting with lines and rectangles
  • Rendering text and embedding images

Reducing page size with SVG

  • Creating graphics with a text editor
  • Substituting vector images for larger PNG files

Engaging Users with Multimedia Features

Enhancing a site with sound

  • Embedding audio in a web page without plugins
  • Entertaining users with natively-supported video
  • Captioning video with Web Video Text Tracks (WebVTT)

Privacy Notice

In order to provide you with the service requested we will need to retain and use your contact information in accordance with our Privacy Notice. If you choose to provide us with this information you explicitly consent to us using the information as necessary to provide the request service to you. If you do not agree please do not proceed to request the service from us.

Marketing Permissions

Would you like to receive our newsletter and other information on products and services which we think will be of interest to you by email. We will always treat your information with care and in accordance with our Privacy Notice. You are free to withdraw this permission at any time.

 

Online Courses

You may prefer an online course if you are looking for a flexible and cost-effective solution. Online courses allow you to study at your own pace, at a time that suits you.

We have the following eLearning options available:

Virtual Classroom

Virtual classrooms provide all the benefits of attending a classroom course without the need to arrange travel and accomodation. Please note that virtual courses are attended in real-time, commencing on a specified date.

Virtual Course Dates

Our Customers Include