Course Description

This 2 day training course is aimed at those who are looking to learn HTML5 and CSS3, and provide a thorough introduction into the use of HTML5 and CSS3 to develop dynamic, modern, standards compliant websites that target the powerful capabilities of modern browsers.

The course takes you through the all common html tags as well as how to style your website using the latest CSS3 standards.

Target Student

This course is for Delegates looking to learn HTML5 and CSS3 with the aim of creating professional web pages, based on the latest standards and best practices.

Pre-Requisites

A basic understanding of HTML, CSS or creating websites would be beneficial but not essential.  Delegates should be comfortable using a computer and the internet.

Performance Based Objectives

By the end of this course delegates will know:

Basics of HTML5 structure, elements and the new HTML5 elements
Style websites using CSS3
HTML forms
Adding video and audio to a website
Extended features of CSS3
Embedding web fonts
Developing multicolumn layouts
Designing responsive pages and using CSS media queries to make your website responsive
Make your site compatible with older browsers
Advanced capabilities of modern browers
The basics of offline web apps

Course Content:

Introduction to HTML5

A Basic HTML5 Template
Defining the Page™s Structure with HTML5
New HTML5 Elements
Changes to Existing Features

Introduction to CSS3

Styling the HTML Template
CSS3 Selectors
CSS3 Properties

HTML5 Forms 

HTML5 New Form Input Types
Additional New Form Controls in HTML5

HTML5 Video and Audio

Video Formats
Video Element
3rd Party Javacript Libraries

Extended Features of CSS3

New Pseudo-classes
Pseudo-elements and Generated Content
CSS3 Colors and Opacity
Rounded Corners
Shadows
CSS3 Gradients and Multiple Backgrounds
CSS3 Transforms
CSS3 Transitions
CSS3 Animations

Embedding Web Fonts with @font-face

Where to Get Fonts
Declaring Fonts in CSS
Applying Fonts to HTML Elements

Multicolumn Layouts

Controlling Columns with CSS3
Creating Columns with HTML

Designing Responsive Pages

Why Responsive?
When to Use Relative Units of Measurement
Testing Pages on Different Devices

Media Queries

Defining Alternative Presentations for Different Devices

Background Compatibility with Older Browsers

Overview of Browser Capabilities
What About Old IE?
Introduction to Modernizr

Advanced Capabilities of the Modern Browser

SVG Graphics
The Canvas Element
Geoloation

Introduction to Offline Web Apps

Storing Data Within the Browser
Caching Assets for Offline Use