HTML & CSS
Module 1: Overview of HTML5
Learning Objective:
- New in HTML5
- New DOCTYPE and Character Set
- New and Depreciated Elements
- Semantic Markup
- Simplifying Selection using the Selectors API
- JavaScript Logging and Debugging
- Window.JSON
- DOM Level
Module 2: Using HTML5
Learning Objective:
- Currently available features
- Browser Support
- Detective native availability of features
- Working with emulation
Hands-on:
- Create a web page that verifies the availability of new HTML5 features.
Module 3: Understanding HTML5 Markup
Learning Objective:
- HTML5 Page Structure
- HTML5 DOCTYPE
- HTML5 markup structural elements
- Semantic elements
Hands-on:
- Create a web page that make usage of new structural and semantic elements like main, section, aside, article, header, footer and other semantic elements.
Module 4: HTML5 Forms
Learning Objective:
- HTML Forms VsXForms
- Functional Forms
- New Form Attributes and Functions
- Placeholder Attribute
- Autocomplete Attribute
- Autofocus Attribute
- List Attribute and datalist Element
- Min and Max attributes
- ValueAsNumber attribute
- Required Attribute
- Checking Forms with Validation
- Validation Feedback
Hands-on:
- Develop a product entry form which uses HTML5 form elements and validation attributes.
Module 5: HTML 5 Audio & Video
Learning Objective:
- The Audio and Video Elements
- Understanding Audio and Video
- Working with Audio and Video Containers
- Understanding Audio and Video Codecs
Hands-on:
- Create a web page that displays multiple video and audio using HTML5 video and audio elements.
Module 6: HTML5 Canvas & SVG
Learning Objective:
- Overview of Canvas Vs. SVG
- Canvas coordinates
- Context
- Pixel Data
- Working with Canvas APIs
- Drawing Operations
- Canvas Transforms
- Understanding and Working with SVG
Hands-on:
- Create a web page that makes use of basic Canvas API and also displays svg graphics and drawings.
Module 7: HTML 5 Storage
Learning Objective:
- Overview of HTML5 Web Storage
- Browser Support for HTML4 Web Storage
- Using the HTML5 Web Storage
- Checking for Browser Support
- Setting and Retrieving Values
- Plugging Data Leaks
Hands-on:
- Create a web page that sites and gets data Run HTML5 web storage.
Module 8: CSS3 Overview
Learning Objective:
- Introducing CSS3
- CSS3 Colors, Gradients and Multiple Backgrounds
- Rounded Corners and Border-Radius
- CSS3 Transforms
- Transitions
- Animations & 2D Transformations
- Web Fonts with @font-face
- CSS3 Multicolumn Layouts
Hands-on:
- Develop a web page that enhances the richness of the page using CSS3,colours,gradients,border radius,animation,transformations and transitions.
Module 9: CSS3 Flexbox
Learning Objective:
- Introduction
- Box Model basics
- Container
- Direction
- Wrapping
- Justifying & Alignments
- Display order
- Flexibility
- Alignment
Hands-on:
- Create a page that displays product gallery layout coded with flexbox.
Module 10: CSS Grid
Learning Objective:
- Introduction
- Grid Layout
- Grid Elements
- Placing Grid Lines
- Attaching Elements to the Grid
- Order and Align Items in Grid Layout
- Grid Flow
- Opening Grid Spaces
Hands-on:
- Create a page that displays product gallery layout coded with CSS grid.