+(91) 9731 203 391

[email protected]

HTML5 and CSS3 Training

This corporate training program takes participants through the introduction, features and syntax of HTML5 & CSS3. All participants will learn how to Use HTML5 and CSS3 to build responsive websites that…

Created by

Stalwart Learning

Category

Web Technologies

ENQUIRE NOW


Course Description

Overview of HTML5 and CSS3

This corporate training program takes participants through the introduction, features and syntax of HTML5 & CSS3. All participants will learn how to:

  • Use HTML5 and CSS3 to build responsive websites that render well on a variety of devices and Work with images, including thumbnails, rollovers, and image maps
  • Participants will be able to create tables and work with forms and the HTML5 validation features, Add audio and video to your pages 
  • They will be able use embedded fonts and format web pages for printing
  • They can Use the CSS3 features for transitions, animation, transforms, and filters and also Use JavaScript and jQuery to enhance their web pages

Duration

5 Days

Prerequisite for HTML5 and CSS3

Basic computer knowledge is required for this training program. A knowledge of HTML would be a plus and would help the participant a very long way.

Course Outline for HTML5 and CSS3

HTML 5

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 3

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

ENQUIRE NOW