HTML5 & CSS3

Description

HTML 5 is everywhere, and is a technology that can no longer be ignored or treated as a extension of HTML 4. HTML 5 is a vast umbrella term for modern front end Engineering, namely JavaScript, Markup, Device APIs, and Styles. Almost anything you see in App Stores will now be created with pure HTML 5..

Although we are going to cover some of the most exciting features of HTML 5 such as geo location, web sockets, local storage, Real Time Communications(Web staff, internet Socket), File / Hardware Access(Native filing system genus Apis, Geo location, Device Orientation and Speech Input, Drag and Drop,), linguistics and Markup, Multimedia, Graphics (2D and 3D Effects) SVG and Canvas, the focus of the course will be to assist people understand the core principles and best practices for making websites and apps.

CSS3 is split into “modules”. The previous specification has been split into smaller items, and new ones are also added. a number of important CSS3 modules are Selectors, Backgrounds and Borders, Box Models, 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.

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:
• 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
• utofocus
• 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

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  

HTML5 Syntax

• The DOCTYPE:
• Character Encoding: 

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