Course outline for HTML5/CSS3

Lab Setup

Hardware Configuration

  • 2GB of free RAM, 20GB of free disk space and full network connectivity

Software Configuration

  • Ubuntu 20.04/22.04 Desktop Edition (sudo/root access required)
  • Firefox and Chrome browsers

Duration

  • 2-5 days

Training Mode

Online training for HTML5/CSS3

We provide:

  • Instructor led live training
  • Self-paced learning with access to expert coaches
  • 24x7 access to cloud labs with end to end working examples

All jnaapti sessions are 100% hands-on. All our instructors are engineers by heart. Activities are derived from real-life problems faced by our expert faculty. Self-paced hands-on sessions are delivered via Virtual Coach.

Classroom training for HTML5/CSS3

Classroom sessions are conducted in client locations in:

  • Bengaluru
  • Chennai
  • Hyderabad
  • Mumbai
  • Delhi/Gurgaon/NCR

Note: Classroom training is for corporate clients only

Detailed Course Outline for HTML5/CSS3

HTML5 - An Introduction

  • What Is HTML5?
  • History
  • Who defines the standards - W3C v/s WHATWG
  • Browser Compatibility - an overview
  • The Future

HTML5 - Getting Started

  • Browser Support revisited
  • Feature Detection and Polyfills
  • Various Tools and Libraries

HTML5 - Structure of Pages

  • The HTML5 Doctype
  • Page Encoding
  • HTML5 Markup - what has changed
  • New Elements
  • Updated Elements
  • Structural Elements
  • New Attributes
  • Deprecated Elements And Attributes

HTML5 - Forms

  • Some patterns identified in current applications
  • New Input Types
  • New Attributes
  • Form Validation

HTML5 - Audio and Video

  • The State of Web Audio And Video Based On Plug-in
  • The Browser wars around the Audio And Video Codec (e.g. H.264, WebM, etc.)
  • New Audio/Video Markup
  • Attributes And Methods
  • Understanding Audio/Video Events
  • Customizing Audio/Video Controls

HTML5 - Canvas

  • Overview Of Graphics In The Browser
  • Canvas Vs. SVG
  • Drawing Shapes
  • Working With Paths
  • Drawing Straight Lines, Circles Or Arcs, Text and Images
  • Understanding Transforms
  • Translation, Rotation and Scaling

HTML5 - Data Storage

  • The need for storage
  • Web Storage
  • Web SQL Storage
  • IndexedDB

HTML5 - Offline Applications

  • The Need For Offline Mode
  • The Manifest File
  • The application cache events
  • Deployments And Updates

HTML5 - Geolocation

  • Introduction To Geolocation
  • Privacy Considerations
  • Ways To Get User Location
  • The Position Object
  • Handling Errors

HTML5 - Web Workers

  • The Current JavaScript Execution Model and issues with it
  • Introduction To Web Workers
  • Web Workers - an example
  • Handling Errors

HTML5 - Messaging

  • The same origin policy
  • Cross-origin XML Http Request
  • CORS
  • XML Http Request 2
  • Progress Events
  • Server-sent Event

HTML5 - Web Sockets

  • Understanding the issues with realtime messaging over HTTP
  • Understanding the various solutions
  • The History (Comet)
  • Overview Of Web Sockets API And Protocol
  • Advantages Of Web Sockets

HTML5 - Misc

  • Microformats and Microdata
  • File Access
  • Drag and Drop
  • History
  • contenteditable
  • Private data in elements

HTML5 and Mobile

  • HTML5 v/s Native - pros and cons
  • Working with Mobile Specific Sensors - Accelerometer, Camera, Compass, Contacts etc
  • Single application for all form-factors - pros and cons
  • Responsive Web Design and fluid layouts
  • Mobile UI Patterns and Examples
  • Various toolkits available - jQuery mobile, PhoneGap etc

CSS3 - Introduction

  • What is new
  • New CSS3 Selectors
  • Browser support

CSS3 - Various New Features

  • Borders - Border Radius, Box shadows, Border Image
  • Backgrounds - Background origin, Multiple backgrounds
  • Text - Text shadows, Word wrap, Multi-column layout
  • Fonts - Font faces, Font properties

CSS3 - Transforms, Transitions and Animations

  • Transforms - translate, rotate, scale, skew, matrix, rotateX and rotateY
  • Transitions
  • Animations

CSS3 - Misc

  • Colors - Opacity , RGBa, HSL, HSLa
  • Box Resizing
  • Object fit and Object position