HTML5 and CSS3 Development

HTML5 has emerged as an exciting and powerful new platform for creating contemporary client-side Web content. The HTML5 standard also embraces techniques for sophisticated communications with the server, via Web sockets and enhancements to Ajax. We'll investigate all these features in depth during this course.

The course also investigates the wealth of new UI capabilities available in the CSS3 standard, such as transformations, animations, media queries, and more.

Duration

4 days

 

Prerequisites

  • Familiarity with HTML and CSS
  • Good knowledge of JavaScript

What you'll learn

  • Creating UI content using graphics, video, and audio
  • Using platform features such as geolocation and file handling
  • Utilizing CSS3 techniques
  • Offline working
  • Multithreading using Web Workers
  • Communicating via Web Sockets and Ajax 2

Course details

HTML and CSS Core Principles

  • HTML core concepts and syntax
  • CSS core concepts and syntax

Creating HTML5 and CSS3 Web Pages

  • HTML5 semantic tags
  • Additional HTML5 layout features
  • CSS3 enhancements

CSS3 Techniques

  • Controlling layout
  • Backgrounds, borders, colours, and text
  • CSS3 selectors
  • Media queries

CSS3 Transformations and Animations

  • Transitions
  • Transformations
  • Keyframe animations

Graphics with Canvas

  • Using the canvas API
  • Core drawing operations
  • Transformations and animations
  • Working with text

Graphics with SVG

  • Getting started with SVG
  • Drawing curves
  • Setting styles
  • Additional techniques

Video and Audio

  • Overview
  • Playing video
  • Playing audio

Geolocation

  • Overview of HTML5 geolocation
  • Sources of geolocation information
  • One-off position requests
  • Repeated position update

Web Storage

  • Overview of HTML5 Web Storage
  • Understanding the Web Storage API
  • Listening for storage events
  • Offline working

Files and Data

  • File handling
  • Drag-and-drop
  • IndexedDB databases
  • Web SQL databases

Communications API

  • Key principles
  • Cross-document messaging
  • Ajax XMLHttpRequest Level 2

Web Sockets

  • The need for Web Sockets
  • Implementing a Web Sockets client
  • Implementing a Web Sockets server

Web Workers

  • Overview of Web Workers
  • Implementing a Web Worker
  • Asynchronous programming techniques