HTML5 CSS3 Training

At Magento Guru, we believe in providing a full-fledged HTML5 and CSS3 Course  in delhi of your desire where our industry experts have designed a top-notch curriculum just for you.

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

  • 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.
  • 30 Working days, daily one and half hours
  • W3C and W3C Members
  • Why WHATWG?
  • What is Web? 
  • Introduction
  • Parts in HTML Document
  • Editors
  • Basic
  • Elements
  • Attributes
  • Headings
  • Basics
  • Paragraphs
  • Formatting
  • Links
  • Head
  • CSS
  • Images
  • Tables
  • JavaScript
  • HTML XHTML
  • HTML4 Drawbacks 
  •  
  • HTML5 HISTORY
  • New Features and groups
  • Backward Compatibility
  • Why HTML5?
  • Power of HTML5:
  • m or mobi or touch domains
  • Common Terms in HTML5 
  • The DOCTYPE:
  • Character Encoding: 
  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <isindex>
  • <noframes>
  • <s>
  • <strike>
  • <tt>
  • <u>
  • <xmp> 
  • 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>   
  • What is Canvas?
  • Create a Canvas
  • Canvas Coordinates
  • Canvas – Paths
  • Canvas – Text
  • Canvas – Gradients
  • Canvas – Images 
  • What is SVG?
  • SVG Advantages
  • Differences Between SVG and Canvas
  • Comparison of Canvas and SVG 
  • Introduction
  • Make an Element Draggable
  • What to Drag?Where to Drop? 
  • Introduction
  • Locate the User’s Position+
  • Handling Errors and Rejections
  • The getCurrentPosition()
  • Geolocation object 
  •  
  • Introduction
  • Video on the Web
  • How It Works?
  • Video Formats and Browser Support
  • HTML5 Video Tags 
  • Introduction
  • Audio on the Web
  • How It Works?
  • Audio Formats and Browser Support
  • HTML5 Audio Tags 
  • Introduction
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week 
  • <datalist>
  • <keygen>
  • <output>  
  • New attributes for <form> and <input>New attributes for <form>:
  • autocomplete
  • novalidate 
  • autocomplete
  • autofocus
  • form, formaction
  • formenctype,formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list, min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required, step 
  • 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> 
  • What is HTML5 Web Storage?
  • Browser Support
  • The localStorage Object
  • The sessionStorage Object 
  • What is Application Cache?
  • Cache Manifest Basics
  • HTML5 Cache Manifest 
  • What is a Web Worker?
  • Check Web Worker Support
  • Create a Web Worker File
  • Terminate a Web Worker 
  • One Way Messaging
  • Browser Support
  • The EventSource Object 
  • New Media Elements
  • <audio>
  • <video>
  • <source>
  • <embed>
  • <track>  
  • What is Multimedia?
  • Browser Support
  • Multimedia Formats
  • Video Formats
  • Sound Formats 
  • Introduction
  • Using MathML Characters
  • Matrix Presentation
  • Math Formulas 
  • 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 
  •  
    • 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