About HTML5 & CSS3 Training

HTML5 is everywhere, and is a technology that can no longer be ignored or treated as a mere extension of HTML4. HTML5 is a vast umbrella term for modern Front End Engineering, namely JavaScript, Markup, DeviceAPIs, and Styles. Almost anything you see in App Stores can now be created with pure HTML5.
Although we will cover some of the most exciting features of HTML5 such as geo location, web sockets, local storage, Real Time Communications(Web Workers, Web Socket), File / Hardware Access(Native Drag & Drop, FileSystem APIs, Geolocation, Device Orientation and Speech Input), Semantics & Markup, Multimedia, Graphics (2D and 3D Effects) SVG and Canvas, the focus of the course will be to help people understand the core principles and best practices for creating websites and apps.
CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added. Some of the most important CSS3 modules are Selectors, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout and User Interface
HTML5 & CSS3 Training Course Prerequisite

HTML, CSS and JavaScript
HTML5 & CSS3 Training Course Objective

As we jump into the course, let me just give you the course objectives, the things that I’m trying accomplish here, and the first thing is to introduce you to HTML5, and really quite honestly, one of my objectives, HTML5 like everything that has to do with the web.
HTML5 is the ubiquitous platform for the web. Whether you’re a mobile web developer, an enterprise with specific business needs, or a serious game dev looking to explore the web as a new platform, HTML5 has something for you! HTML5 is making the web platform more powerful in a number of different areas.
HTML5 & CSS3 Training Course Duration

30 Working days, daily one and half hours
HTML5 & CSS3 Training Course Overview

Introduction to WEB

W3C and W3C Members
Why WHATWG?
What is Web?
HTML Basics

Introduction
Parts in HTML Document
Editors
Basic
Elements
Attributes
Headings
Basics
Paragraphs
Formatting
Links
Head
CSS
Images
Tables
JavaScript
HTML XHTML
HTML4 Drawbacks
HTML5 Intro

HTML5 HISTORY
New Features and groups
Backward Compatibility
Why HTML5?
Power of HTML5:
m or mobi or touch domains
Common Terms in HTML5
HTML5 Syntax

The DOCTYPE:
Character Encoding:
Obsolete Elements/Deprecated Elements

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>
<xmp>
HTML5 New Elements

New Semantic/Structural Elements <article>
<aside>
<bdi>
<command>
<details>
<dialog>
<summary>
<figure>
<figcaption>
<footer>
<header>
<mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr>
HTML5 Canvas

What is Canvas?
Create a Canvas
Canvas Coordinates
Canvas – Paths
Canvas – Text
Canvas – Gradients
Canvas – Images
HTML5 SVG

What is SVG?
SVG Advantages
Differences Between SVG and Canvas
Comparison of Canvas and SVG
HTML5 Drag/Drop

Introduction
Make an Element Draggable
What to Drag?Where to Drop?
HTML5 Geo location

Introduction
Locate the User’s Position+
Handling Errors and Rejections
The getCurrentPosition()
Geolocation object
HTML5 Video

Introduction
Video on the Web
How It Works?
Video Formats and Browser Support
HTML5 Video Tags
HTML5 Audio

Introduction
Audio on the Web
How It Works?
Audio Formats and Browser Support
HTML5 Audio Tags
HTML5 Input Types

Introduction
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
HTML5 Form Elements

<datalist>
<keygen>
<output>
HTML5 Form Attributes

New attributes for <form>
and <input>New attributes for <form>
autocomplete
novalidate
New attributes for <input>:

autocomplete
autofocus
form, formaction
formenctype,formmethod
formnovalidate
formtarget
height and width
list, min and max
multiple
pattern (regexp)
placeholder
required, step
HTML5 Semantic

Introduction
What are Semantic Elements?
non-semantic elements: <div>
and <span>
semantic elements: <form>
, <table>
, and
<img>
New Semantic Elements in HTML5
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
HTML5 Web Storage

What is HTML5 Web Storage?
Browser Support
The localStorage Object
The sessionStorage Object
HTML5 App Cache

What is Application Cache?
Cache Manifest Basics
HTML5 Cache Manifest
HTML5 Web Workers

What is a Web Worker?
Check Web Worker Support
Create a Web Worker File
Terminate a Web Worker
HTML5 SSE

One Way Messaging
Browser Support
The EventSource Object
HTML Media

New Media Elements <audio>
<video>
<source>
<embed>
<track>
html multimedia
what is multimedia?
browser support
multimedia formats
video formats
sound formats
html5 – mathml
introduction
using mathml characters
matrix presentation
math formulas
css 1.0 and 2.0
css basics
css introduction
css syntax,css id & class
css styling,styling backgrounds
styling text,styling fonts
styling links,styling lists
styling tables
css border
css3
introduction
css3 modules
selectors
box model
backgrounds and borders
text effects
2d />3D Transformations
Animations
Multiple Column Layout
User Interface Borders

border-radius
box-shadow
border-image
CSS3 Backgrounds

background-size
background-origin
CSS3 Text Effects

text-shadow
word-wrap
CSS3 Fonts

@font-face Rule
font-stretch
font-weight
CSS3 2D Transforms

How Does it Work?
Browser Support
2D Transforms
translate()
rotate()
scale()
skew()
matrix()
CSS3 3D Transforms

rotateX()
rotateY()
CSS3 Transitions

How does it work?
transition-property
transition-duration
transition-delay
CSS3 Animations

CSS3 @keyframes Rule
Browser Support
Animation, animation-duration
CSS3 Multiple Columns

column-count
column-gap
column-rule
CSS3 User Interface

resize
box-sizing
outline-offset