HTML5-and-CSS3-Training

HTML5 & CSS Training

Hyper text markup language(HTML), it is the heart of each website because every site finally renders HTML into the browser no matter whether it is developed in any technology like Java, ASP.NET, and PHP etc. HTML is not a programming language; it is a markup language. It is very powerful and easy to learn. It does not require any software to start; you can easily start from text editor. That makes it cost effective. Performance of HTML is very high to any other technology.

HTML5 is the new standard of HTML. It has enhanced features for programmers as well as for users. Users will not have to use a Flash plug-in for video and audio content. It fully supports CSS3, 2D/3D Graphics, Video and Audio etc. Visual Studio users typically write code in HTML5 when creating web site. It also supports Local SQL Database that makes it more effective.

CSS stands for Cascading Style Sheet, it is the backend of the html. Presentation of your site mainly depends upon the styles. Styles are used to display HTML elements in well suited format. Styles can define in CSS that saves your time and you can easy control your site from one place. It is also very powerful; you can even control your rendering of styles in particular browser.


Course Outline


HTML 5

  • W3C and W3C Members
  • 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 3

  • 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
  • Introduction
  • CSS3 Modules
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
  • border-radius
  • box-shadow
  • border-image
  • background-size
  • background-origin
  • text-shadow
  • word-wrap
  • font-face Rule
  • font-stretch
  • font-weight
  • How Does it Work?
  • Browser Support
  • 2D Transforms
  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
  • rotateX()
  • rotateY()
  • How does it work?
  • transition-property
  • transition-duration
  • transition-delay
  • CSS3 keyframes Rule
  • Browser Support
  • Animation, animation-duration
  • column-count
  • column-gap
  • column-rule
  • resize
  • box-sizing
  • outline-offset


Live Project

  • Project
  • Project Case Study

Course Registration

TESTIMONIALS


KEEP IN TOUCH

Subscribe to Our Newsletter to get Important News & Offers