HTML5 & CSS3 Online Training

HTML & 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 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 Geolocation

• 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