HTML5 & CSS3

1 - Introduction to HTML5

What is HTML5?

History of HTML5

Current HTML5 support

W3C, WHATWG and HTMLWG

Ensuring browser support

Setting your own markup standards

The Document Object Model (DOM)

When can I use HTML5?

HTML5 Showcase

Using HTML5 on mobile devices

HTML5 or Flash

Developer Tools

Detecting HTML5 features

HTML5 vs. HTML4

API overview

2 - HTML5 Markup

HTML5 page structure

HTML5 DOCTYPE

Character set

Script tag, and style sheet link

HTML5 markup

New structural tags

New content tags

New application-focused tags

Deprecated elements

Semantic elements

HTML5 and CSS

Marking Up Dates and Times With HTML5

Marking Up Captions for Figures in HTML5

Understanding the HTML 5 document header

Structuring your document with <header>, <footer>, <nav>, <figure> and other new structure tags

data attributes

3 - HTML5 FORMS 2.0

HTML5 form elements

Building and using HTML5 forms

New elements,

New attributes

New input types

Setting form autofocus

Using placeholder data

Marking required fields

Working with number inputs

Using date pickers

Setting autofocus to a field

Using the Placeholder attribute

Capturing email addresses

Capturing url addresses

Capturing a telephone number

Capturing numbers (spinner)

Capturing numbers (slider)

Using the Date, Month, Week, Time inputs

Defining a Search Box

Choosing a Color

Using a DataList

Creating Selection Groups

Defining Command Buttons

Setting field input to be required

4 - HTML5 Selectors API

querySelector()

querySelectorAll()

5 - HTML5 Geolocation API

Geolocation overview

Third party API: Google Map API

6 - HTML5 Audio and Video

The audio element

The video element

Understanding audio and video

Audio and video containers

Audio and video codec’s

Backwards Compatibility

Using the HTML5 media tags

Creating custom controls

Accessible media

Manipulate videos with canvas

7 - HTML5 Canvas

Intro to canvas

Introducing the canvas element & Creating Fallback Content

The canvas coordinate system and sizing the canvas

Drawing with Canvas

Drawing with canvas, including filling, stroking and erasing rectangles

Drawing lines and other paths in canvas, including circles

Drawing text with canvas

Detecting mouse position on canvas

Drawing and manipulating images on canvas

Playing and manipulating videos on canvas

Canvas animation intro

8 - HTML5 User Media API

Overview

Accessing device camera 

Capturing audio and video

Displaying webcam data into a page

9 - SVG intro

Overview

How to use SVG

Drawing primitives

Using SMIL to animate SVG

Creating complex SVG graphics with Illustrator

SVG accessibility

Intro to JavaScript libraries that help with drawing 

10 - avaScript and HTML5

Understanding and working with the HTML5 DOM

11 - Introducing to CSS3

What is CSS3?

The current status of CSS3

An overview of CSS3 capabilities

Can you use CSS3 now?

Detecting support for CSS3

Understanding vendor prefixes

Overview of the CSS3 specification

CSS Profiles

The document tree

12 - CSS3 Selectors

New CSS3 selectors

An overview of child and sibling selectors

Using child and sibling selectors

An overview of attribute selectors

Using attribute selectors

Pseudo-class UI selectors

Negation pseudo-class selectors

Target pseudo-class selectors

Structural selectors

Nth-child selector syntax

First, last, and only structural selectors

Using structural selectors to write more efficient code

13 - Colours and Opacity in CSS3

Color formats in CSS3

Transparency in CSS3

Setting opacity

RGBA and HSL values and alpha channel opacity

CSS3 gradients

Creating linear gradients

Creating radial gradients

14 - CSS3 Typography

Working with web fonts

How can I use any font in CSS3?

@font-face syntax

Writing @font-face declarations

Using web fonts

Adding shadows to text

Creating multi-column text

15 - CSS3 and Page Layout

An overview of the flexible box model

Controlling box orientation

Setting element flexibility

Distributing boxes

Controlling box alignment

Working with box-sizing

16 - Borders in CSS3

Using border-radius

Custom rounded corners

Drop shadows

Box shadows

Gradient borders

Using images for borders

Using outlines

17 - The CSS3 Box Model

Introduction to CSS3 Box Model

Difference between CSS3 and CSS2 box models

18 - Backgrounds in CSS3

Resizing backgrounds

Controlling background size

Creating multiple background images on one element

Using background-origin

Clipping background content

19 - CSS3 Transitions and Transforms

An overview of CSS3 2D transforms

Using 2D transforms

Setting transform origins

An overview of CSS3 transitions

Animating CSS properties

Using easing in animations

An overview of 3D transforms

20 - Browser support

Checking support

Providing alternatives

Enriching the experience layer