HTML5 CSS3 & JavaScript Certification

Curriculum

1 Overview of HTML5
Learning Objective:
By the end of this module you learn about the new features overview and some of the depreciated elements of HTML5.

• 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 3

2 Using HTML5 Today
Learning Objective:
By the end of this module you will learn about the support of HTML5 features across different browsers and how to detect for the feature existence.

• 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.

3 Understanding HTML5 Markup
Learning Objective:
By the end of this module you will explore the enhanced tags of HTML with latest version and application of semantic tags to improve the readability of HTML page for non browser based programs.

• HTML5 Page Structure
• HTML5 DOCTYPE
• HTML5 markup structural elements
• Semantic elements

Hands-on:

• Create a web page that makes use of new structural and semantic elements like main, section, aside, article, header, footer and others.

4 HTML 5 Forms
Learning Objective:
By the end of this module you will learn the new HTML5 form features.You will explore the new form attributes and elements.

• 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:

• Create a product entry form which uses HTML5 form elements and validation attributes.

5 HTML5 Audio & Video
Learning Objective:
By the end of this module you will learn how to make use of new HTML5 multimedia audio and video elements.

• 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.

6 HTML5 Canvas & SVG
Learning Objective:
By the end of this module you will understand the Canvas API, and how to work with svg in HTML5.

• 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.

7 HTML 5 Storage
Learning Objective:
By the end of this module you will learn how to take the advantage of HTML5 storage.

• 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.

8 CSS3 Overview
Learning Objective:
By the end of this module you will explore new CSS3 features like new color system, gradients, multiple backgrounds, rounded corners, border radius, animations, transformations, transitions, web fonts and multiple layouts.

• 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.

9 CSS3 Flexbox
Learning Objective:
By the end of this module you will understand the modern layout system flexbox to handle single dimensional layouts in web pages.

• Introduction
• Box Model basics
• Container
• Direction
• Wrapping
• Justifying & Alignments
• Display order
• Flexibility
• Alignment

Hands-on:

• Create a page that displays a product gallery with a layout coded with flexbox.

10 CSS Grid
Learning Objective:
By the end of this module you will understand the modern layout system CSS grid to handle two dimensional layouts in the pages. You will also learn about placing the different elements in grid flow, order and alignment items in the layout.

• 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 a product gallery with a layout coded with CSS grid.

11 Introduction
Learning Objective:
By the end of this module you will gain insight about JS features and its support across browsers. Also learn about datatypes and debugging JS apps.

• What is JavaScript?
• Why JavaScript?
• Advantages and Limitations
• JS Versions
• Browser compatibility
• Explore JS syntax
• Using console
• JS comments
• Variables and Data types
• Debugging using chrome developer tools

Hands-on:

• Create a basic JS program that uses different data types and debug it in Chrome.

12 Operators
Learning Objective:
By the end of this module you will learn about different operators and their uses.

• Assignment operators
• Comparison operators
• Arithmetic operators
• Bitwise operators
• Logical operators
• String operators
• Conditional (ternary) operator
• Comma operator
• Unary operators
• Relational operators

Hands-on:

• Create a JS program with multiple expression made of different operators.

13 Conditions
Learning Objective:
By the end of this module you will learn about how to use conditionals in JS.

• if
• if..else
• if..elseif
• switch

Hands-on:

• Create a JS program which implements decision based program flow using different if types and switch.

14 Loops
Learning Objective:
By the end of this module you will learn about how to use iterative statements and learn the differences between them.

• for statement
• do..while statement
• while statement
• break statement
• continue statement
• for..in statement
• for..of statement (ES6)

Hands-on:

• Create JS programs that iteratively print numbers with different types of loops.

15 Functions
Learning Objective:
By end of this module you will learn how to define different types of functions and differences between them. You can also explore the scope, context and powerful function api.

• Define functions
• Parameters
• Scope, context and hoisting
• Named, Anonymous and function expressions
• Function invocation
• Call, apply and bind
• Callbacks
• Closures

Hands-on:

• Create named functions, anonymous functions, function expressions, use call, apply and bind to change the context. Create closures to simulate private variables.

16 Strings & Dates
Learning Objective:
By the end of this module you will learn how to perform operations with string and date objects.

• Creating Strings
• Most commonly used string methods
• Creating Dates
• Most commonly used Date methods

Hands-on:

• Create string as primitives and objects, Date instances. Use most commonly used string methods.

17 Arrays
Learning Objective:
By the end of this module you will learn how to work with arrays.

• What is an array?
• CRUD operations with array
• Most commonly used array methods

Hands-on:

• Create Arrays using literal and constructor syntax. Perform CRUD operations on array and use functional programming styled methods like map, filter etc.

18 Objects
Learning Objective:
By the end of this module learn how to create objects in different syntaxes,access object properties, using accessors and implementing inheritance.

• What is Object?
• Different ways to create objects?
• Constructors and object instances
• Accessing properties with dot and bracket notation
• Getters and setters
• What is "this"?
• The Object constructor and its methods
• Working with prototype
• Inheritance

Hands-on:

• Create object using literal, constructor function, Object constructor. Create getters and setters, Implement inheritance using prototype.

19 Error Handling in JavaScript
Learning Objective:
By the end of this module you will learn how to handle errors.

• Try..catch
• Types of Errors

Hands-on:

• Create a JS program to throw and catch exceptions.

20 HTML DOM
Learning Objective:
By the end of this module you will learn how to work with HTML DOM.

• What is DOM?
• Why DOM?
• Understand Document object
• CRUD with DOM
• Traversing DOM
• Built in & custom Events

Hands-on:

• Create a dynamic table with CRUD operations.

21 Working with Forms in JavaScript
Learning Objective:
By the end of this module you will learn how to manage HTML forms with JS.

• Setting and Getting values from form elements
• Validating forms

Hands-on:

• Create form with validation and submission features.

22 Introduction to Babel
Learning Objective:
By the end of this module you will understand the significance of babel and popular presets.

23 Variables and scoping
Learning Objective:
By the end of this module you will learn the different scoped variable declarations.

• Let & const
• Temporal Dead Zone

Hands-on:

• Create block and function scoped variables.

24 Template Strings
Learning Objective:
By the end of this module you will learn how to create multiline strings and tagged template literals.

• Introduction
• Tagged Template Literals

Hands-on:

• Create a function that generates formatted HTML using tagged template literals.

25 Destructuring
Learning Objective:
By end of this module you will learn how to take advantage of this new destructuring syntax to pull values of composite data structures.

• Introduction
• Array Destructuring
• Object Destructuring

Hands-on:

• Create a program that destructures nested object and arrays.

26 Spread and Rest Operators
Learning Objective:
By the end of this module you will learn how spread and rest operators works and their past counter parts.

Hands-on:

• Create a function that takes variable number of arguments using rest operator.
• Create a function that merges arrays and objects using spread operators.

27 Function Improvements
Learning Objective:
By the end of this module you will learn how arrow functions will help to write elegant anonymous functions and their auto bind feature. You will also learn where they are fit and not fit.

• Arrow functions
• Default Arguments

Hands-on:

• Create a program that uses arrow functions in callbacks and solves the context issues.
• Create a function that takes default args.

28 Object literal Improvements
Learning Objective:
By the end of this module you will learn how to take advantage of new improved syntax to create object literals.

• Short hand properties and methods
• Computed Keys

Hands-on:

• Create a object literal with shorthand properties and computed keys.

29 Classes
Learning Objective:
By the end of this module you will learn how to create classes and implement inheritance.

• Introduction
• Creating classes
• Inheritance

Hands-on:

• Create a class and subclass with inheritance.

30 Modules
Learning Objective:
By the end of this module you will learn how new ES6 modules will help you modularize your JS code and load modules using SystemJS.

• Introduction
• Different module formats
• SystemJS module loader

Hands-on:

• Create a module. Import and export module.

31 Maps and Sets
Learning Objective:
By the end of this module you will learn how new data structures in ES6 will help you to manage data with standard api.

• Map and Weak Maps
• Sets and Weak Sets

Hands-on:

• Create a JS code that performs CRUD using Map, Weak Map, set and Weak Set.

32 Iterables and iterators
Learning Objective:
By the end of this module you will learn how iterators and iterables work. and their influence on modern JS programming

Hands-on:

• Iterate on array and code custom iterators.

33 Asynchronous programming
Learning Objective:
By the end of this module you will learn how to write async code in JS using several different support syntaxes.

• Background
• Callbacks
• Promises for asynchronous programming
• Generators (ES6)
• Async / await (ES7)

Hands-on:

• Solve the async code problem with different styles like callback, promises, generators and async/await.

34 Symbols
Learning Objective:
By the end of this module you will learn how symbols help in metaprogramming

Hands-on:

• Create symbols.

35 JSON
Learning Objective:
By the end of this module you will learn how JSON structures must be made, also learn how to parse and stringify JSON.

• What is JSON?
• Why JSON?
• Data Types?
• Parse and Stringify JSON
• Objects and Arrays in JSON

Hands-on:

• Create array of objects and parse and stringify.

36 Remote communication in JS
Learning Objective:
By the end of this module you will learn how to consume data from remote api using inbuilt browser features

• Understanding AJAX programming
• Working with XMLHttpRequest
• Working in fetch

Hands-on:

• Create a program that performs CRUD on mock REST Api.

37 Browser DOM
Learning Objective:
By the end of this module you will learn how take advantage of modern browser features to read geolocation, access browser history and cookies.

• Window Object
• History Object
• Navigator Object
• Timers
• Cookies

Hands-on:

• Create program to read user geolocation and write it to cookies and delete after timeout.

38 Local Storage
Learning Objective:
By the end of this module you will learn how to take advantage of modern browser local storage feature to persist data at client side.

Hands-on:

• Create a program that performs CRUD with local Storage.

39 Classroom Project
Learning Objective:
In this project you will use all the skills acquired so far in this course.

• Issue Tracker Application

Hands-on:

• Create a issue tracker application with CRUD features.