Advanced HTML5 & CSS3 Training Course

Advanced HTML5 & CSS3 Course Contents

HTML5

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
• Reviewing Features and Benefits

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

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

HTML5 Selectors API

• querySelector()
• querySelectorAll()

HTML5 Geolocation API

• Geolocation overview
• Third party API: Google Map API

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

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

HTML5 User Media API

• Overview
• Accessing device camera 
• Capturing audio and video
• Displaying webcam data into a page

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 

JavaScript and HTML5

• Understanding and working with the HTML5 DOM

CSS3

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

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

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

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

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

Borders in CSS3

• Using border-radius
• Custom rounded corners
• Drop shadows
• Box shadows
• Gradient borders
• Using images for borders
• Using outlines

The CSS3 Box Model

• Introduction to CSS3 Box Model
• Difference between CSS3 and CSS2 box models

Backgrounds in CSS3

• Resizing backgrounds
• Controlling background size
• Creating multiple background images on one element
• Using background-origin
• Clipping background content

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

Multi-column layout

• Browser support
• Checking support
• Providing alternatives
• Enriching the experience layer

Projects in HTML5 and CSS3

Project 1 – Build a website using HTML5 & CSS3:

Create a website using HTML5 and CSS3. In this project we will create a website using new semantic markup and CSS3 features, we will use it as a showcase container for our projects.

Project 2 – Build a simple Geolocation application:

Create an application that dynamically detects user's current position and displays it on a map using Google Map API.

Project 3 – Build  Canvas Demos:

Create simple Canvas demos to draw different shapes, add interactivity, manipulate videos, animate objects.

Project 4 – Build a simple custom video player 

Using the new video tag and JavaScript, we will see how to create a simple video player, add a progress bar and how to add effect to videos using <video>, <canvas> and JavaScript.

Project 5 – Build a 3D cube

Using amazing new properties of CSS3 (transforms, animations) we will build a simple 3D animation.

Project 6 – Build a CSS3 carousel

We will build an image carousel with CSS3 and no JavaScript.