HTML

HTML Fundamentals Introduction

HTML Text

Headings

Demo: Headings

Block vs. Inline Elements

Demo: Block and Inline Elements

Whitespace

Demo: Whitespace

Additional Text Elements Demo: Additional Elements

HTML Lists

List Types

Demo: Creating Lists

Demo: List Rendering

HTML Links

Link concepts

emo: Linking Documents

Understanding Targets

Demo: Linking to Targets

 Additional Link Attributes

 HTML Tables

 Table Elements

 Demo: Structuring a Table

Table Data

 Spanning Columns and Rows

 Formatting Tables

Demo: Table Formatting

HTML Form and Form Elements

 Introduction

 HTTP Get Request

HTTP POST Request

 Form Input Elements

HTML Forms Fundamentals

 Form Basics

Demo: Form Basics

Form Settings

Demo: Form Settings

HTML Form Inputs

Text inputs

Demo: Text inputs

Selections

Demo: Selections

Input attributes

Demo: Input attributes

HTML Images and Objects

Image and Object Concepts

Demo: Adding Images

Demo: Adding Objects

HTML5

Introduction to HTML5

 Limitations of HTML4

 Introduction and Advantages of HTML5

 First HTML5 Document

 Overview of New Features of HTML5

 Page Layout Semantic Elements

 Header

 Navigation

 Section & Articles

 Footer

 Aside and more

Form Elements and Attributes

New Input Types

 New Elements in Form

 New Attributes in Form Tag

New Attributes in <input> Tag

Working with Canvas

 Coordinates

Path and Curves

Drawing Lines, Rectangles and Circles

Text and Font

Color Gradations

 Drawing Images

Scalable Vector Graphics (SVG)

 Understanding SVG

 Benefits of SVG

 Using SVG Tag

 Comparing with Canvas

Media – Audio and Video

 Audio and Source tags

 Video and Source tags

 Track tag

 Mime types supported

 Browser Compatibility

 Programming using JavaScript

 Drag and Drop

 Drag and Drop Events

 Programming using JavaScript

Web Storage

 Overview

Local Storage

Session Storage

 Browser Compatibility

CSS

Working with CSS

 Introduction to CSS

 Understanding Document Object Model

 Introduction to style sheets

 CSS Syntax

 CSS Comments

 The CSS Rules

 Ways to work with CSS

 External style sheet

Internal style sheet

 Inline style

 CSS Selectors

 The element Selector

 The id Selector

 The class Selector

 Grouping Selectors

 The CSS Cascade

 Background Color

Background Image

Background Image–Repeat Horizontally or Vertically

 Background Image – Set position and no-repeat

 CSS Fonts & Typography

 CSS Font Families

Font Style

 Font Size

Text Color

 Text Alignment

 Text Decoration

 Text Transformation

Working with Links and List

 Styling Links

Common Link Styles

List Item Markers

 Image as the List Item Marker

 Working with Table

Table Borders

Collapse Borders

Table Width and Height

Text Alignment

Table Padding

Table Color

CSS Color & Positioning

Web colors

 Hex colors

Color tools

CSS Box Model

Working with Content

Working with Padding

 Working with Border

 Working with Margin

CSS Display and Positioning

CSS Display and Visibility

 How Elements Float

 Turning off Float–Using Clear

 Static Positioning

 Fixed Positioning

Relative Positioning

 Absolute Positioning

CSS3

Working with CSS3

 Introduction to CSS3

 Selectors

Box Model

 CSS3 Borders

Working with border-radius

Working with box-shadow

Working with border-image

 CSS3 Backgrounds

 Background-size

 Background-origin

CSS3 Gradients

 Linear Gradients

 Radial Gradients

 CSS3 Text Effects

 Text-shadow

 Word-wrap

 CSS3 Web Fonts

Creating custom fonts

 Font Descriptors

CSS3 2D Transforms

 Working with translate

 Working with rotate

 Working with scale

 Working with skew

 Working with matrix

 CSS3 3D Transforms

 Working with rotate

 Working with rotate

 CSS3 Transitions and Animations

 Working with Animations

Working with Transitions

jQuery

jQuery–Introduction

 jQuery Library

First jQuery Example

Document Ready Function

 How to escape a special character

 jQuery-Selectors

 Basic Selectors

Precise Selectors

 Combination of Selectors

 Hierarchy Selectors

 Selection Index Filters

 Visibility Filters

 Forms Selectors

 Forms Filters

 Find Drop down Selected Item

 jQuery-Document Traversal

 Getting a specific DOM element

 jQuery-Event

 Events Helpers

Attach Event

 Detaching Events

 Events Triggering

Live Events

jQuery–Effects

jQuery-HTML Manipulation

jQuery–UI

Working with UI framework

 Live examples

Bootstrap4

Working with Bootstrap4

Introduction to Bootstrap 4

 Bootstrap History

Why Bootstrap?

Embedding Bootstrap into page

Bootstrap Grid System

 Importance of Grid System

 Grid Classes

 Bootstrap Stacked/Horizontal

 Bootstrap Grid Small

 Bootstrap Grid Medium

 Bootstrap Grid Large

 Bootstrap Grid Examples

 Bootstrap Text/Typography

 Working with Text

 Working with Contextual Colors and Backgrounds

Bootstrap Images

 Rounded Corners

Circle

Thumbnail

 Bootstrap Jumbotron

 Inside Container

 Outside Container

 Bootstrap Buttons

 Button Styles

BS Button Groups

Vertical Button Groups

 Nesting Button Groups & Drop-Down Menus

Bootstrap Glyph icons

 Glyph icon Syntax

Badges

 Progress Bars

 Bootstrap Pagination

 Basic Pagination

 Active State

Disabled State

 Pagination Sizing

Bootstrap Pager

 Bootstrap List Groups

Bootstrap Forms

 Bootstrap Inputs

 Bootstrap Carousel

 Bootstrap Plugins

Overview

Transition Plugin

Collapsible Plugin

 Modal Dialog Plugin

 Dropdown Plugin

 Scrollspy Plugin

 Tab Plugin

Tooltip Plugin

 Popover Plugin

Alert Plugin

Button Plugin

Carousel Plugin

 Affix Plugin

UI Design

Understanding Tools

 Introduction to Photoshop

 User centered design. Interaction with digital design.

Colors and design.

Design elements.

Icon creations.

Concept of Presentation to client.

UI design process.

UI DESIGN STRUCTURE

Questioning Visualizing Client Requirement.

Getting Online with Adobe

Portfolio and Behance.

Portfolio Development.

Psychology and Human Factors.

UI Design Process.

Resources

Get to know MongoDB

1. Basic concepts of databases
2. What is NoSQL?
3. Where is it used?
4. Types of NoSQL
5. Advantages of NoSQL over RDBMS
6. Its benefits
7. Overview of MongoDB
8. Introduction to JSON/BSON
9. JSON data types
10. MongoDB installation

CRUD Operations

1. MongoDB Development Architecture
2. MongoDB Production Architecture
3. MongoDB CRUD Introduction
4. MongoDB CRUD Concepts
5. Read and Write Operations
6. Write Operation Concern Levels

Data Modelling

1. Data Modeling in MongoDB
2. RDBMS vs. Data models
3. Data Modeling tools
4. Data modeling example & patterns
5. Model TREE structure
6. Operational strategies

Administration

1. Backup strategies
2. Monitoring
3. Monitoring Commands
4. Monitoring of performance issues
5. Run time configuration
6. Export & import of data
7. Relationship between Document
8. Model Specific Application Contexts
9. Data Model Reference
10. Hands on with MongoDB Data Modeling
11. Data Management

Scalability and Availability

1. Introduction to replica
2. Election of new primary
3. Replica set
4. Type of Replica
5. Hidden Replica
6. Arbiter Replica
7. Sharding
8. Concepts around Replication
9. Setting up Replicated Cluster
10. Setting up Sharded Cluster
11. Sharding Database, Collections

Indexing and Aggregation Framework

1. Index Introduction
2. Index Concepts
3. Index Types
4. Index Properties
5. Index Creation
6. Index Tutorial
7. Indexing Reference
8. Aggregation to Introduction
9. Approach to Aggregation
10. Type of Aggregation (Pipeline, MapReduce & Single Purpose)
11. Performance Tuning

MongoDB Security

1. Security Risks to Databases
2. MongoDB Security Approach
3. MongoDB Security Concept
4. Access Control
5. Integration with MongoDB with Robomongo
6. Integration with MongoDB with Java

Overview

• 1.1 Quick Start
• 1.2 Features
• 1.3 Writing Code
• 1.4 Running Code
• 1.5 Debugging
• 1.6 Documentation

Foundation

• 2.1 Application Structure
• 2.2 Object Creation
• 2.3 The Class System
• 2.4 Base Classes
• 2.5 Panels, Toolbars and Buttons
• 2.6 Layouts
• 2.7 Windows

View Models and View Controllers

• 3.1 View Models
• 3.2 References
• 3.3 Data, Formulas, Stores
• 3.4 View Controllers
• 3.5 Controller Lifecycle

Sending and Receiving Data

• 4.1 Models
• 4.2 Fields
• 4.3 convert() and calculate()
• 4.4 Proxies
• 4.5 Schemas
• 4.6 Stores
• 4.7 Loading
• 4.8 Selecting
• 4.9 Sorting
• 4.10 Filtering
• 4.11 Adding, Updating and Removing Records
• 4.12 AJAX
• 4.13 JSONP

Data-Aware Components

• 5.1 Templates and Data views
• 5.2 Grids
• 5.3 Widgets
• 5.4 Breadcrumbs & Trees
• 5.5 Forms
• 5.6 Charts

Advanced

• 6.1 Responsive Design
• 6.2 Routes

6.3 MVC

INTRODUCTION

• Course Introduction
• What is Angular
• Architecture of Angular Apps
• Setting Up the Development Environment
• Your First Angular App
• Structure of Angular Projects
• Webpack
• Angular Version History
• How to Take This Course

TYPESCRIPT FUNDAMENTALS

• Introduction
• What is TypeScript
• Your First TypeScript Program
• Declaring Variables
• Types
• Type Assertions
• Arrow Functions
• Interfaces
• Classes
• Objects
• Constructors
• Access Modifiers
• Access Modifiers in Constructor Parameters
• Properties
• Modules
• Exercise
• Solution

ANGULAR FUNDAMENTALS

• Introduction
• Building Blocks of Angular Apps
• Components
• Generating Components Using Angular CLI
• Templates
• Directives
• Services
• Dependency Injection
• Generating Services Using Angular CLI
• Authors Page

DISPLAYING DATA AND HANDLING EVENTS

• Introduction
• Property Binding
• Attribute Binding
• Adding Bootstrap
• Class Binding
• Style Binding
• Event Binding
• Event Filtering
• Template Variables
• Two-way Binding
• Pipes
• Custom Pipes
• Favorite Component
• Title Casing

BUILDING REUSABLE COMPONENTS

• Introduction
• Component API
• Input Properties
• Aliasing Input Properties
• Output Properties
• Passing Event Data
• Aliasing Output Properties
• Templates
• Styles
• View Encapsulation
• ngContent
• ngContainer
• Like Component

DIRECTIVES

• Introduction
• ngIf
• Hidden Property
• ngSwitchCase
• ngFor
• ngFor and Change Detection
• ngFor and trackBy
• The Leading Asterisk
• ngClass
• ngStyle
• Safe Traversal Operator
• Creating Custom Directives
• ZippyComponent

TEMPLATE-DRIVEN FORMS

• Introduction
• Building a Bootstrap Form
• Types of Forms
• ngModel
• Adding Validation
• Specific Validation Errors
• Styling Invalid Input Fields
• Cleaner Templates
• ngForm
• ngModelGroup
• Control Classes and Directives
• Disabling the Submit Button
• Working with Check Boxes
• Working with Drop-down Lists
• Working with Radio Buttons
• Course Form

REACTIVE FORMS

• Introduction
• Building a Bootstrap Form
• Creating Controls Programmatically
• Adding Validation
• Specific Validation Errors
• Implementing Custom Validation
• Asynchronous Operations
• Asynchronous Validation
• Showing a Loader Image
• Validating the Form Upon Submit
• Nested FormGroups
• FormArray
• FormBuilder
• Quick Recap
• Change Password Form

CONSUMING HTTP SERVICES

• Introduction
• JSONPlaceHolder
• Getting Data
• Creating Data
• Updating Data
• Deleting Data
• OnInit Interface
• Separation of Concerns
• Extracting a Service
• Handling Errors
• Handling Unexpected Errors
• Handling Expected Errors
• Throwing Application-specific Errors
• Handling Bad Request Errors
• Importing Observable Operators and Factory Methods
• Global Error Handling
• Extracting a Reusable Error Handling Method
• Extracting a Reusable Data Service
• The Map Operator
• Optimistic vs Pessimistic Updates
• Observables vs Promises
• GitHub Followers Page

ROUTING AND NAVIGATION

• Introduction
• Routing in a Nutshell
• Configuring Routes
• RouterOutlet
• RouterLink
• RouterLinkActive
• Getting the Route Parameters
• Why Route Parameters Are Observable
• Routes with Multiple Parameters
• Query Parameters
• Subscribing to Multiple Observables
• SwitchMap Operator
• Programmatic Navigation
• Blog Archives

Getting Started
Introduction
What is React?
Real-World SPAs & React Web Apps
Adding the Right React Version to Codepen
Writing our First React Code
Why Should we Choose React?
React Alternatives
Understanding Single Page Applications and Multi Page Applications

Refreshing Next Generation JavaScript (Optional)
Module Introduction
Understanding “let” and “const”
Arrow Functions
Exports and Imports
Understanding Classes
Classes, Properties and Methods
The Spread & Rest Operator
Destructuring
Reference and Primitive Types Refresher
Refreshing Array Functions

Understanding the Base Features & Syntax
Module Introduction
The Build Workflow
Using Create React App
Understanding the Folder Structure
Understanding Component Basics
Understanding JSX
JSX Restrictions
Creating a Functional Component
Components & JSX Cheat Sheet
Working with Components & Re-Using Them
Outputting Dynamic Content
Working with Props
Understanding the Children Property
Understanding & Using State
Props & State
Handling Events with Methods
To Which Events Can You Listen?
Manipulating the State
Functional (Stateless) vs class (Stateful) Components
Passing Method References Between Components
Adding Two Way Binding
Adding Styling with Stylesheets
Working with Inline Styles
Time to Practice – The Base Syntax

Working with Lists and Conditionals
Module Introduction
Rendering Content Conditionally
Handling Dynamic Content “The JavaScript Way”
Outputting Lists (Intro)
Outputting Lists
Lists & State
Updating State Immutably
Lists & Keys
Flexible Lists

Styling React Components & Elements
Module Introduction
Outlining the Problem Set
Setting Styles Dynamically
Setting Class Names Dynamically
Adding and Using Radium
Using Radium for Media Queries
Enabling & Using CSS Modules
More on CSS Modules
Adding Pseudo Selectors
Working with Media Queries

Debugging React Apps
Module Introduction
Understanding Error Messages
Finding Logical Errors by using Dev Tools & Sourcemaps
Working with the React Developer Tools
Using Error Boundaries

Diving Deeper into Components & React Internals
Module Introduction
A Better Project Structure
Splitting an App Into Components
Comparing Stateless and Stateful Components
Understanding the Component Lifecycle
Converting Stateless to Stateful Components
Component Creation Lifecycle in Action
componentWillUnmount()
Component Updating Lifecycle Hooks
Component Updating Lifecycle in Action
Updating Lifecycle Hooks (Triggered by State Changes)
Performance Gains with PureComponents
How React Updates the App & Component Tree
Understanding React’s DOM Updating Strategy
Returning Adjacent Elements (React 16+)
React 16.2 Feature: Fragments
Understanding Higher Order Components (HOCs)
Windows Users Must Read – File Downloads
A Different Approach to HOCs
Passing Unknown Props
Using setState Correctly
Validating Props
Available PropTypes
Using References (“ref”)
More on the Ref API (React 16.3)
The Context API (React 16.3)
Updated Lifecycle Hooks (React 16.3)

A Real App: The Burger Builder (Basic Version)
Module Introduction
Planning an App in React – Core Steps
Planning our App – Layout and Component Tree
Planning the State
Setting up the Project
Creating a Layout Component
Starting Implementation of The Burger Builder Container
Adding a Dynamic Ingredient Component
Adding Prop Type Validation
Starting the Burger Component
Outputting Burger Ingredients Dynamically
Calculating the Ingredient Sum Dynamically
Adding the Build Control Component
Outputting Multiple Build Controls
Connecting State to Build Controls
Removing Ingredients Safely
Displaying and Updating the Burger Price
Adding the Order Button
Creating the Order Summary Modal
Showing & Hiding the Modal (with Animation!)
Implementing the Backdrop Component
Adding a Custom Button Component
Implementing the Button Component
Adding the Price to the Order Summary
Adding a Toolbar
Using a Logo in our Application
Adding Reusable Navigation Items
Creating a Responsive Sidedrawer
Working on Responsive Adjustments
More about Responsive Adjustments
Reusing the Backdrop
Adding a Sidedrawer Toggle Button
Adding a Hamburger Icon
Improving the App – Introduction
Prop Type Validation
Improving Performance
Using Component Lifecycle Methods
Changing the Folder Structure

Reaching out to the Web (Http / Ajax)
Module Introduction
Understanding Http Requests in React
Understanding our Project and Introducing Axios
Creating a Http Request to GET Data
Rendering Fetched Data to the Screen
Transforming Data
Making a Post Selectable
Fetching Data on Update (without Creating Infinite Loops)
POSTing Data to the Server
Sending a DELETE Request
Fixing a Bug
Handling Errors Locally
Adding Interceptors to Execute Code Globally
Removing Interceptors
Setting a Default Global Configuration for Axios
Creating and Using Axios Instances

Burger Builder Project: Accessing a Server
Module Introduction
Firebase & The Right Database
Creating the Firebase Project
Creating the Axios Instance
Sending a POST Request
Displaying a Spinner while Sending a Request
Handling Errors
Retrieving Data from the Backend
Removing Old Interceptors

Multi-Page-Feeling in a Single-Page-App: Routing
Module Introduction
Routing and SPAs
Setting Up Links
Setting Up the Router Package
react-router vs react-router-dom
Preparing the Project For Routing
Setting Up and Rendering Routes
Rendering Components for Routes
Switching Between Pages
Using Links to Switch Pages
Using Routing-Related Props
The “withRouter” HOC & Route Props
Absolute vs Relative Paths
Absolute vs Relative Paths (Article)
Styling the Active Route
Passing Route Parameters
Extracting Route Parameters
Parsing Query Parameters & the Fragment
Using Switch to Load a Single Route
Navigating Programmatically
Additional Information Regarding Active Links
Understanding Nested Routes
Creating Dynamic Nested Routes
Redirecting Requests
Conditional Redirects
Using the History Prop to Redirect (Replace)
Working with Guards
Handling the 404 Case (Unknown Routes)
Loading Routes Lazily
Routing and Server Deployment
Time to Practice – Routing

Adding Routing to our Burger Project
Module Introduction
Building the Checkout Container
Setting Up Routing & Routes
Navigating to the Checkout Page
Navigating Back & To Next Page
Passing Ingredients via Query Params
Navigating to the Contact Data Component
Order Submission & Passing Data Between Pages
Adding an Orders Page
Implementing Navigation Links
Fetching Orders
Outputting the Orders

Forms and Form Validation
Module Introduction
Analyzing the App
Creating a Custom Dynamic Input Component
Setting Up a JS Config for the Form
Dynamically Create Inputs based on JS Config
Adding a Dropdown Component
Handling User Input
Handling Form Submission
Adding Custom Form Validation
Fixing a Common Validation Gotcha
Adding Validation Feedback
Improving Visual Feedback
Showing Error Messages
Handling Overall Form Validity
Working on an Error
Fixing a Bug

Redux
Module Introduction
Understanding State
The Complexity of Managing State
Understanding the Redux Flow
Setting Up Reducer and Store
Dispatching Actions
Adding Subscriptions
Connecting React to Redux
Connecting the Store to React
Dispatching Actions from within the Component
Time to Practice – Dispatching Actions
Passing and Retrieving Data with Action
Switch-Case in the Reducer
Updating State Immutably
Updating Arrays Immutably
Immutable Update Patterns
Outsourcing Action Types
Combining Multiple Reducers
Understanding State Types
Time to Practice – Redux Basics
Combining Local UI State and Redux

Adding Redux to our Project
Module Introduction
Installing Redux and React Redux
Basic Redux Setup
Finishing the Reducer for Ingredients
Connecting the Burger Builder Container to our Store
Working on the Total Price Calculation
Redux & UI State
Adjusting Checkout and Contact Data

Redux Advanced
Module Introduction
Adding Middleware
Using the Redux Devtools
Executing Asynchronous Code – Introduction
Introducing Action Creators
Action Creators & Async Code
Handling Asynchronous Code
Restructuring Actions
Where to Put Data Transforming Logic?
Using Action Creators and Get State
Using Utility Functions
A Leaner Switch Case Statement
An Alternative Folder Structure
Diving Much Deeper

Redux Advanced: Burger Project
Module Introduction
Installing the Redux Devtools
Preparing the Folder Structure
Creating Action Creators
Executing Asynchronous Code
Fetching Ingredients Asynchronously
Initializing Ingredients in the BurgerBuilder
Changing the Order of our Ingredients Manually
Adding Order Actions
Connecting Contact Data Container & Actions
The Order Reducer
Working on Order Actions
Redirect to Improve UX
Combining Reducers
Handling Purchases & Updating the UI
Resetting the Price after Purchases
Fetching Orders (via Redux)
Checking our Implemented Functionalities
Refactoring Reducers
Refactoring Reducers Continued

Adding Authentication to our Burger Project
Module Introduction
Understanding Authentication in Single Page Applications
Required App Adjustments
Adding an Auth Form
Adding Actions
Getting a Token from the Backend
Adding Sign-In
Storing the Token
Adding a Spinner
Logging Users Out
Accessing Protected Resources
Updating the UI Depending on Auth State
Adding a Logout Link
Forwarding Unauthenticated Users
Redirecting the User to the Checkout Page
Persistent Auth State with localStorage
Fixing Connect + Routing Errors
Ensuring App Security
Guarding Routes
Displaying User Specific Orders
Improving our Burger Project
Module Introduction
Fixing the Redirect to the Frontpage
Using updateObject in the Entire App
Sharing the Validation Method
Using Environment Variables
Removing console.log()s
Adding Lazy Loading

Testing
Module Introduction
What is Testing?
Required Testing Tools
What To Test?
Writing our First Test
Testing Components Continued
Jest and Enzyme Documentations
Testing Components Correctly
Testing Containers
How to Test Redux
Deploying the App to the Web
Module Introduction
Deployment Steps
Building the Project
Deploying on Firebase

Bonus: Working with Webpack
Module Introduction
Important: Use Webpack 3
Introducing Webpack
How Webpack works
Basic Workflow Requirements
Project & npm Setup
Creating a Basic Folder & File Structure
Creating the Basic React Application
Installing Production Dependencies
Setting Up the Basic Webpack Config
Adding File Rules
Introducing Babel
Adding CSS File Support
Creating Rules for Images
Lazy Loading
Injecting the Script into the index.html File
Creating the Production Workflow

Bonus: Next.js
Module Introduction
Understanding Server Side Rendering
Setting Up a Project
Understanding the Basics
Next.js & Components & Pages
Styling our App in Next.js
Handling (404) Errors
A Special Lifecyle Hook
Deploying our App

Bonus: Animations in React Apps
Module Introduction
Preparing the Demo Project
Using CSS Transitions
Using CSS Animations
CSS Transition & Animations Limitations
Using ReactTransitionGroup
Using the Transition Component
Wrapping the Transition Component
Animation Timings
Transition Events
The CSSTransition Component
Customizing CSS Classnames
Animating Lists
Alternative Animation Packages

Bonus: A Brief Introduction to Redux Saga
Module Introduction
Installing Redux Saga
Creating our First Saga
Hooking the Saga Up (to the Store and Actions)
Moving Logic from the Action Creator to a Saga
Moving More Logic Into Sagas
Handling Authentication with a Saga
Handling Auto-Sign-In with a Saga
Moving the BurgerBuilder Side Effects into a Saga
Moving the Orders Side Effects into Sagas
Why Sagas can be Helpful
Diving Deeper into Sagas

Bonus: Building the Burger CSS
Building the Burger CSS Code

Next Steps and Course Roundup
Module Introduction
React Rocks! Where to find more Examples
More Inspiration: Real-World Projects Built with React
Static React Apps with Gatsby.js
Introducing React Native
Component Libraries (Example: Material UI)
Smaller Apps with Preact
Comparing React with Preact

Node Js Course Content: