Introduction to Front-End Development
Distinguish between front-end, back-end, and full-stack developers.
Create and style a webpage with HTML and CSS.
The benefits of working with UI frameworks.

Creating simple JavaScript codes.
Creating and manipulating objects and arrays.
Writing unit tests using Jest

Implement Version Control systems
Navigate and configure using the command line
Use a GitHub repository. Create a GitHub repository
Manage code revisions

Create a simple form with a responsive layout using HTML5 and CSS
Create a responsive layout using CSS
Create a UI using Bootstrap
Implement debugging tools

Introduction to React What is React?
Why React?
React version history
React 16 vs React 15
Just React – Hello World
Using create-react-app
Anatomy of react project
Running the app
Debugging first react app
Templating using JSX
Working with React. createElement
Expressions
Using logical operators
Specifying attributes
Specifying children
Fragments
About Components
Significance of component architecture
Types of components
Functional
Class based
Pure
Component Composition
Working with state and props
What is state and it significance
Read state and set state
Passing data to component using props
Validating props using propTypes
Supplying default values to props using defaultProps
Rendering lists

Using react key prop
Using map function to iterate on arrays to generate elements
Event handling in React
Understanding React event system
Understanding Synthetic event
Passing arguments to event handlers
Understanding component lifecycle and handling errors
Understand the lifecycle methods
Handle errors using error boundaries
Working with forms
Controlled components
Uncontrolled components
Understand the significance to default Value prop
Using react ref prop to get access to DOM element
Context
What is context
When to use context
Create Context
Context.Provider
Context.Consumer
Reading context in class
Code-Splitting
What is code splitting
Why do you need code splitting
React.lazy
Suspense
Route-based code splitting
ooks
What are hooks
Why do you need hooks
Different types of hooks
Using state and effect hooks
Rules of hooks
Routing with react router
Setting up react router
Understand routing in single page applications
Working with BrowserRouter and HashRouter components
Configuring route with Route component
Using Switch component to define routing rules
Making routes dynamic using route params
Working with nested routes
Navigating to pages using Link and NavLink component
Redirect routes using Redirect Component
Using Prompt component to get consent of user for navigation
Path less Route to handle failed matches
Just Redux
What is redux
Why redux
Redux principles
Install and setup redux
Creating actions, reducer and store
Immutable.js
What is Immutable.js?
Immutable collections
Lists
Maps
Sets
React Redux
What is React Redux
Why React Redux
Install and setup
Presentational vs Container components
Understand high order component
Understanding mapStateToProps and mapDispatchtToProps usage
Redux middleware
Why redux middleware
Available redux middleware choices
What is redux saga
Install and setup redux saga
Working with Saga helpers
Sagas vs promises
Unit Testing
Understand the significance of unit testing
Understand unit testing jargon and tools
Unit testing react components with Jest
Unit testing react components with enzyme
Webpack Primer
What is webpack
Why webpack
Install and setup webpack
Working with webpack configuration file
Working with loaders
Working with plugins
Setting up Hot Module Replacement
Isomorphic React
What is server-side rendering (SSR)?
Why SSR
Working with render To String and render To StaticM arkup methods

Intro to Backend
How the Web Works
Introduction
Forms and Inputs
Templates
Problem Set: Forms and Templates
Databases
Problem Set: Databases
User Accounts & Security
Problem Set: User Accounts & Security

Syllabus: Introduction
Node.js Fundamentals: Foundations and Environment Setup
Node.js Fundamentals: Internals
Node.js Fundamentals: Module System
Node.js Fundamentals: Package Management
Node.js File I/O: Planets Project
Web Servers with Node.js
First Express.js API
NASA Project
Testing APIs
Improving Node Performance
Databases
Working With REST APIs – SpaceX Project
Node Security + Authentication
Continuous Integration and Delivery
Node Production and the Cloud (Docker + AWS)
GraphQL
Sockets with Node.js
Where To Go From Here?
Bonus: Deno vs Node.js
Appendix: How JavaScript Works
Appendix: Asynchronous JavaScript
Appendix: Pong Front End
Appendix: TypeScript
Appendix: SQL

Syllabus: Module 1: Charter 1: Intro to JavaScript
Module 2: Charter 2: Intro to Node, Mongo & REST APIs
Module 3: Charter 3: Setup for Node, MongoDB, Postman, and other API tools
Module 4: Charter 4: First App
Module 5: Charter 5: JavaScript: ES6 Basics
Express Framework, Building scalable web applications Introduction to CSS
OOPS Design Patterns & Object Modelling
JSON & AJAX Database & MongoDB
Node.js HTTP & Websockets
Development Environment & Tools -

Node JS
Session 1: Node JS Modules
Functions
Buffer
Module
Modules Types
Core Modules
Local Modules
Modules Exports
Session 2: Node Package Manager
What is NPM
Installing Packages Locally
Installing package globally
Adding dependency in package Json
Updating packages
Session 3: Creating Web Server
Creating Web Server
Sending Requests
Handling HTTP requests
Session 4: File System
Read File
Writing a File
Opening a File
Deleting a File
Writing a file asynchronously
Other I/O Operations
Session 5: Debugging Node JS Application
Core Node JS Debugger
Session 6: Events
Event Emitter class
Inheriting Events
Returning event emitter
Session 7: Express JS
Configuring Routes
Working with Express
Session 8: Serving Static Resources
Serving Static Files
Working with Middle Ware
Session 9: Database Connectivity
Connecting String
Configuring
Updating Records
Working with Select Command
Deleting Records
Session 10: Project Development
Project Development using Node JS