• HTML 5

• Laying out a Page with HTML5
• Page Structure
• New HTML5 Structural Tags
• Page Simplification

• Apache Server

• HTTP, HTTP/2
• Download and Installation
• Directory Structure & Important files
• Deploying web pages on AHS
• Accessing pages from browser

• Semantic Tags

• The section Tag, The article Tag
• Outlining, Accessibility
• aside tag, detail tag, summary tag
• nav tag, header tag, footer tag

• HTML Tables

• table tag, thread tag
• tbody tag, caption

• HTML5 Forms

• Modernizr
• New Input Types
• search, tel
• url and email
• date/time input types
• number, range
• min, max, and step attributes
• color

• HTML5 New Form Attributes

• autocomplete
• novalidate

• HTML5 New Form Field Attributes

• required
• placeholder
• autofocus
• autocomplete
• form
• pattern

• New Form Elements

• datalist
• progress and meter
• HTML5 Semantics (New semantic HTML5 elements)
• HTMl5 coding conventions (Best practices, style guide
  and coding conventions)
• Add Interaction with Social Networks
• Optimize for Mobile Devices
• Use Geolocation and Maps
• Use Responsive Web Design
• Save Data Locally
• Save Data Remotely
• Consume Data from Services
• Create Progressive Web Apps
• Serve Users While Offline
• Progressive Web All the Things (PWA)

CSS 3

• The Power of CSS

• A First Example, Challenges
• Next Up

• Introducing CSS3

• What is CSS3? The History of CSS
• Box Model
• Browser Support
• HTML5

• Selectors and Pseudo Classes

• Attribute Selectors
• The Target Pseudo-Class
• UI Element States Pseudo-Classes
• Negation Pseudo-Class
• Structural Pseudo-Classes

• Fonts and Text Effects

• Fonts on the Web
• Font Services
• The @font-face Rule
• Text Shadow
• Word Wrapping

• Colors, Gradients, Background Images

• Color
• The Opacity Property
• Backgrounds
• background-origin, and background-size

• Borders and Box Effects

• Image Borders
• Rounded Corners
• Box Shadow

• Must Know

• position, float, clear, overflow, resize
• margin, padding, z-index

• More features of CSS3

• Media Queries

• Targeting Widths and Devices with CSS3 Media Queries
• Responsive Images and the viewport Metatag
• Writing media queries for desktop browsers
• Writing media queries for tablet viewports
• Writing media queries for mobile devices
• Writing media queries for extra small screens
• Writing media queries for printers

• Responsive Building Blocks

• Fluid Grids
• Fluid Images/Media
• Media Queries
• Breakpoints

• Layout Patterns/Responsive Patterns

• Creating Fixed Width Layouts???
• Mostly Fluid Pattern, Column Drop Pattern
• Layout Shifter Pattern, Mondrian Pattern, Basic Gallery Pattern

• Implementing an Adaptive User Interface

• Creating a Print-Friendly Stylesheet
• Adapting Page Layout To Fit a Different Form Factor

• Adaptive Design

Responsive + Adaptive = Awesomeness

• Implementing CSS3 in the “Real World”

• Stuff That Ain’t (Strictly) CSS, but Sure Is Useful
• jQuery
• HTML5
• Modernizr, Polyfills, Preprocessors
• Frameworks and Grid Systems
• Going Forward/Additional Resources
• What’s Next? Online Resources. Get Involved

• CSS Best practices and performance tuning

• CSS3 Examples

• Designing beautiful toolbars, menus, navbars, fixed bars
• Designing floating right side bars
• Applying realistic animations on ui elements

JavaScript

• Introduction to JavaScript

• What JavaScript Is? What JavaScript Is Not?
• What JavaScript Is Used For?
• JavaScript and Its Place in a Web Page.

•  The <SCRIPT> tag

•  Internal script,  External script
•  <noscript> tag

•  Lexical Structure

•  Character Set,  Case Sensitivity
•  Optional Semicolons,  Valid Identifiers
•  Reserved Word

• JavaScript Building Blocks: Data Types, Literals, and Variables

• Data Types

• Primitive Data Types
• Composite Data Types

• Variables

• Valid Names
• Declaring and Initializing Variables
• Dynamically or Loosely Typed Language
• Scope of Variables
• Concatenation and Variables

• Constants

• Dialog Boxes

• Interacting with the User

• The alert() Method
• The prompt() Method
• The confirm() Method

• Operators

• About JavaScript Operators and Expressions

• Assignment
• Precedence and Associativity

• Types of Operators

• Arithmetic Operators
• Shortcut Assignment Operators
• Autoincrement and Autodecrement Operators
• Concatenation Operator, Comparison Operators
• Logical Operators, The Conditional Operator

• Data Type Conversion

• The parseInt() Function
• The parseFloat() Function
• The eval() Function

• Under Certain Conditions

• Control Structures, Blocks, and Compound Statements
• Conditionals

• if/else, if/else if, switch

• Loops

• The while Loop, The do/while Loop
• The for Loop, The for/in Loop
• Loop Control with break and continue
• Nested Loops and Labels

• Intermediate JavaScript

• Functions

• What Is a Function?

• Function Declaration and Invocation
• Return Values
• Anonymous Functions as Variables
• Recursion
• Functions Are Objects

• Function arguments
• Optional Arguments
• Argument list and ‘arguments’ identifier

• Function: Advanced concepts

• Function as Data
• Anonymous function
• Callbacks
• Self-invoking function
• Inner (Private) Functions 
• Functions that Return Functions 
• Function: Rewriting itself

• Variable Scopes

• Function Level
• No Block Level
• Global Level

• Objects

• What Are Objects?

• Objects and the Dot Syntax
• Creating an Object with a Constructor
• Properties of the Object

o    Methods of the Object

•  Objects Categories

• Native objects (String, Number, Array, Image, Date, Math, etc.)
• Host objects   (window, document, forms, etc.)
• user-defined objects

• JavaScript Core Objects

• What Are Core Objects?
• Array Objects

• Declaring and Populating Arrays
• Array Object Properties
• Associative Arrays
• Nested Arrays

• Array Methods
• The Date Object

• Using the Date Object Methods
• Manipulating the Date and Time
• Customizing the Date Object with the prototype Property

• The Math Object

• Rounding Up and Rounding Down
• Generating Random Numbers

• Wrapper Objects (String, Number, Function, Boolean)

• The String Object
• The Number Object
• The Boolean Object
• The Function Object

• Handling Events

• Introduction to Event Handlers
• The Inline Model for Handling Events

• HTML and the Event Handler
• Setting Up an Event Handler
• Return Values, JavaScript Object Methods and Events

• Handling a Window or Frame Event

• The onLoad and onUnLoad Events
• The onFocus and onBlur Event Handlers
• The onResize Event Handler

• Handling Mouse Events

• How to Use Mouse Events
• Mouse Events and Images—Rollovers
• Creating a Slideshow with Mouse Events

• Handling Link Events

• o    JavaScript URLs

• Handling a Form Event

• Object Oriented JavaScript Overview

• Inheritance, Encapsulation, Abstraction, Polymorphism

• Objects

• JSON and Literal Objects

• Namespacing

• Global Namespace pollution
• window context
• Global Abetment Pattern
• Creating user defined context

• Change the Scope

• The call() method
• The apply()method
• The with statement 

• Handling “this” 

‘this’ in borrowing method; in callback; in global scope

• Closures

• Overview
• Nested Functions as Closures 
• Private properties with closures
• Closures in timers
• Closures as calllbacks

TypeScript

Introduction:

• Why Learn TypeScript?
• Course Breakdown
• Basics

Getting Started:

• Installing TypeScript
• Compiling Your First TypeScript Program
• Understanding TypeScript Errors
• Installation & Basic Use

Basic TypeScript:

• The Type System
• Basic Types
• Interfaces
• Classes
• Inheritance
• Modules

TypeScript Implementation:

• Automatically Compile TypeScript with Grunt

Building an App with TypeScript

Angular

Introduction

Describe the Single Page Application Lifecycle

Demonstrate creation of angular application

Displaying data using interpolation, ngIf and ngFor

Using pipes to format number and date

Angular(Components and  Routing)

Creation of component

Event handling and two way binding

Introduction to Routing

Angular (Forms)

Implementation of forms using Template Driven Forms

Implementation of forms using Reactive Forms with validations

Angular (Component Interaction)

Implementation of interaction between components

Angular Testing

Demonstrate karma test case creation with DOM reading

Angular (Services and Guards)

Implementation of service

Protecting routes with Auth Guards

using Service and HttpClient to invoke web service

Node JS

Why Node.js

Introduction to node

Advantages of node.js

Differences between JavaScript and node.js

Starting Node

Node REPL

Installing Node Package Manager (NPM)

Working with NPM

Generating package.json

Working with node

Node Fundamentals

Using Core Modules

FS  

OS Module

HTTP Module

File System Access

Synchronous vs. asynchronous I/O

Path and directory operations

__dirname and __filename

Asynchronous file reads and writes

Events Module

Working with Events

Events Object

EventEmitter Class

Creating own Event Emitter

Emitting events

Events subscription

Events unsubscription

Process Events

Streams –

Reading from Stream

Writing to Stream

Piping Streams

Working With Web sockets

Getting Started

 Adding Socket.io To Your App

 Exploring The Front-end

 Sending Live Data Back & Forth

 Creating The Front-end UI

 Showing Messages In WebApp

Communication with Databases

Understanding NoSQL DB support

Creating collections

Inserting documents in collection

Fetching documents from collection

Using Socket.IO

Creating Socket Server

Creating Socket Client

Continuous/Duplex communication

ReactJS

Introduction to React
What problem(s) does React solve? 

• Traditional, pre-JS web applications 
• Late-model, MV* and JS web applications 

React’s solutions 

• Single-page apps 
• View libraries 
• Helper libraries 

React development environment

• Simplicity:create-react-app
• Build-your-own: an overview 

Hello world 

• Your  first React component 
• Using React within a page 
• Making some basic changes 
• React and JSX 

JSX

• What is JSX? 
• Using JSX 
• Using React with JSX 
• Using React without JSX 
• Precompiled JSX 

Components
Types of components 

• Functional components 
• Class-based components 
• Why use one or the other? 

Props and state 

• Passing in properties 
• Limitations of properties 
• Using state 
• When to use state, when to use props 

Event handling 

• React event handling 
• Synthetic events 
• Reactvs DOM event handling 

Children 

• Components within components 
• Known children and unknown children 
• Testing child components 

Parent-child component communication 

• Communication from parent to child 
• Communication from child to parent 
• Container presentational  components 

React Component Lifecycle 

• Overview 
• Startup and mounting
• Updating
• Unmounting
• Calling lifecycle methods in tests
• Error handling and error boundaries 

Intermediate component usage 

• PropTypes 
• Typing and React 
• Using PropTypes 
• PropTypes in production 

Asynchronous data 

• When should asynchronous fetching be done? 
• What challenges does async offer? 
• Asynchronous best practices 

Lists of data 

• Iterating over a list 
• The key property 
• Sorting data 

Forms

• Controlled vs uncontrolled components 
• What does React now about your form field? 
• Does React control your form field? 
• When does React find out about changes to your form field? Form field types
  Controlling a text field 

Other form fields

Getting data out of a form

Working with form data in tests 

• Introduction to routing
• What problem is routing trying to solve? 
• How does routing solve this problem? 
• Tying components to URLs 
• Passing parameters via the URL 

Routing software 

• React-router 
• Other routers
• Simple router example 
• More complex routing o Top-level routing 
• Routing at the top of your application 
• Allowing other parts of the application to manage routing 

Redirects 

React-router objects 

• match 
• history 
•  location
• Routing organizational techniques 

Hooks

• What are hooks, and what problem do they solve? 
• Defined hooks 
• The state hook 
• The effect hook 
• Rules of hooks 
• Using hooks today 
• Advanced React 

Understanding and optimizing reconciliation 

• Best practices for React reconciliation 
• Recognizing common issues 
• Making improvements 
• React.js Best Practices 

Refs 

• What’s a ref? 
• What problem does it solve? 
• How can I use refs? 
• The challenges of testing refs 

Context 

• What is the context API? 
• Is the context API public? 
• How to use the context API 

GraphQL 

• Introduction to GraphQL 
• Creating a GraphQL server 
• Creating a GraphQL Service 
• Defining the GraphQL Schema 
• Defining the GraphQL Resolvers 
• Working with GraphQL Queries,Mutations 
• Consume GraphQL Service with Axios 
• Using GraphQL with Redux Data Store 
• Updating the Server