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