What is HTML 5

• Overview of HTML 5
• Browser Support
• W3C and Web Hypertext Application Technology Working Group (WHATWG). Specifications
• Power of HTML5 in web & mobile Domains
• Overview of updated new features

HTML5 Syntax

• The DOCTYPE
• Character Encoding
• The <script> tag
• The <link> tag
• HTML5 Document

Forms

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Form Elements

• <datalist>
• <keygen>
• <output>

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

Video and Audio

• Media
• <audio>
• <video>
• <source>
• <embed>
• plugins
• youtube

Types of Elements

• Semantic Elements
• Structural Elements

HTML5 NEW ELEMENTS

• <article>
• <aside>
• <canvas>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <hgroup>
• <main>
• <mark>
• <meter>
• <nav>
• <section>
• <summary>
• <time>

Migration from HTML4 to HTML5

• HTML5 Browser Support
• HTML5 Elements as Block Elements
• Adding New Elements to HTML
• Problem With Internet Explorer
• Complete Shiv Solution
• HTML5 Skeleton

HTML5 DEPRECATED TAGS

• <acronym>
• <center>
• <font>
• <frame>
• <frameset>
• <s>
• <u>

HTML5 DEPRECATED ATTRIBUTES

• align-caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
• background-body
• bgcolor-table, tr, td, th and body.
• border table
• cellpadding-table
• cellspacing-table
• hspace-img
• vspace-img
• noshade-hr
• rules-table
• size-hr
• type-li, ol and ul
• width-hr, table, td, th, pre.

Web Storage

• Local Storage
• Session Storage
• Web Workers
• MathML
  • • Introduction
    • Browser Support
    • MathML Characters
    • Matrix Presentation
    • Math Formulas
• Drag and Drop API
  • • Browser Support
    • Make an Element Draggable
    • What to Drag - ondragstart and setData()
    • Where to Drop - ondragover
    • Do the Drop - ondrop
    • Drag image back and forth
• Canvas Overview
  • • Lines
    • Curves
    • font
    • Image
    • Paths
    • Shapes
    • Color, gradients
• SVG
  • • What is SVG?
    • SVG Advantages
    • Differences Between SVG and Canvas
    • Rectangle
    • Circle
    • Ellipse
    • Line
    • Polygon

CSS 3.0

• CSS 2.0 vs CSS 3.0
• Introduction to css3
• whats new in css3.0
• border
  • • box-shadow
    • border-image
    • border-radius
• background
  • • background-clip
    • background-origin
    • background-size
    • Multiple Background Images
• Gradients
  • Linear Gradients
    • • Top to Bottom
      • Left to Right
      • Diagonal
      • Angles
      • Multiple Color Stops
      • Transparency
  • repeating-linear-gradient
  • Radial Gradients
    • • Evenly Spaced Color Stops
      • Differently Spaced Color Stops
      • Set Shape
      • Use of Different Size Keywords
        • closest-side
        • farthest-side
        • closest-corner
        • farthest-corner
    • repeating-radial-gradient
• text effects
  • • text-shadow
    • word-wrap
• @FONT Face
  • • Browser Support
    • Font Formats
    • Browser Support for Font Formats
    • Using The Font
    • Working with third party plugins
• Google fonts
• 2D Transforms
  • • Browser Support for 2D Transforms
    • transform
    • transform-origin
    • translate(x,y)
    • translateX(n)
    • translateY(n)
    • scale(x,y)
    • scaleX(n)
    • scaleY(n)
    • rotate(angle)
    • skew(x-angle,y-angle)
    • skewX(angle)
    • skewY(angle)
• 3D Transforms
  • • rotateX()
    • rotateY()
    • rotateZ()
• RGBA
• Box Resize
• Box Sizing
• Outline
• Transitions
  • • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • linear
    • ease
    • ease-in
    • ease-out
    • ease-in-out
• Animations
  • • @keyframes
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
      • running
      • paused
    • animation-timing-function
      • linear
      • ease
      • ease-in
      • ease-out
      • ease-in-out
      • object-fit
• Selectors
• Multiple Columns
  • • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
• User Interface
  • • resize
    • outline-offset
• Variables
• Box-sizing
• Flex
• Media Queries
• Overview of CSS 3.0 compatibility for Internet Explorer