Contents

1 HTML5 and CSS3 Course Overview
2 HTML5 and CSS3 Course Content

HTML5 and CSS3 Course Overview

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 and Drop, FileSystem APIs, Geolocation, Device Orientation and Speech Input), Semantics and 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 and CSS3 Training Course Prerequisite

HTML, CSS and JavaScript

HTML5 and CSS3 Training Course Objectives

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 and CSS3 Course Duration

30 Working days, daily one and half hours

HTML5 and CSS3 Course Content

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 Introduction

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 and CSS Styling,Styling Backgrounds
Styling Text,Styling Fonts, Links, Styling Lists and 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, duration and 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