Full Stack Web Development | MERN Stack

About the Course

Learn to build entire web applications from start to finish on one of the most versatile tech stacks : MongoDB, Express.js, React.js and Node.js (MERN stack)

Duration: 3 Months

Mode: Online Session

Frontend:

HISTORY OF WEB
Understanding how and who built the web
CLIENT SERVER ARCHITECTURE
The general architecture used by websites

HTML STRUCTURE
How to create the structure of a web page
BLOCK V/S INLINE ELEMENTS
Understand the difference between inline and block HTML elements
TABLE
Learn to create tables in HTML

MORE TAGS
Practice creating HTML with more tags
BLOCK V/S INLINE ELEMENTS
Understand the difference between inline and block HTML elements
TABLE
Learn to create tables in HTML

FORM
What is an HTML form?
FORM FIELDS
Discussing various form elements like <input>, <textarea> etc
CSS INTRODUCTION
What is CSS and how to use it in HTML?
BLOG PAGE
Building and styling the blog project

CSS UNITS
Learning about various CSS units used to style HTML elements
CSS BOX MODE
Understanding the CSS box model

STARTING THE PROJECT
Start building the Resume project by creating the HTML structure

INTRO TO FLEX
Learning what flex is and how it works
FLEX PROPERTIES
Discovering various flex properties used to style HTML elements
USING FLEX IN RESUME
Utilising flex to style the Resume project

PSEUDO ELEMENTS
What are pseudo elements and where to use them?
FINISHING UP
Finish building the Resume

MEDIA QUERIES
What is responsive design and how to use media queries to build a responsive web app that works with multiple devices?

ANIMATION PROPERTIES
Basics of CSS animation and how to animate HTML elements using animate.css

FRONTEND FRAMEWORKS
What are frontend frameworks and how to use one
GRID SYSTEM
Learning about grid system of bootstrap
BOOTSTRAP COMPONENTS
Using various other bootstrap elements like Navbar, Jumbotron etc
ASSIGNMENT
Build a music player project with your newly gained skillset

INTRO AND HISTORY OF JS (ECMA)
What is JS and history of JS
FIRST JAVASCRIPT CODE VARIOUS IDES AVAILABLE
Various IDES available

VARIABLES, DATA TYPES
Learning the basics of the language
OPERATORS & CONDITIONAL STATEMENTS
Working with operators and conditional statements

LOOPS
Working with various loops
FUNCTIONS EXPRESSIONS V/S FUNCTION DECLARATION
Difference between a function expression and declaration
ARRAYS AND ITS USAGE AND INTRO TO OBJECTS
What are arrays and using array functions like splice, slice, etc. Introduction to objects in JS

EXECUTION CONTEXT, HOISTING, CALL STACK
Learning the internal working of the language
SCOPE
Understanding scope in JS
CLOSURES
What are closures and its application
JS RUNTIME ENVIRONMENT
Introduction to JRE and its components

ARROW, IIFE, PURE/ IMPURE
Different types of functions
CALLBACK FUNCTIONS
What are Callback functions, and when they are used
HIGHER ORDER FUNCTIONS
What are Higher Order Functions and its application
MAP, REDUCE, AND FILTER
Working of map() reduce() and filter() functions

OBJECT, CONSTRUCTOR FUNCTION
Understanding creation and access of objects, ‘this’ keyword, Constructor function, and its usage
PROTOTYPE
Understanding Prototype and its chain in objects and Array
DESTRUCTURING
Learning Object and Array destructuring

CLASS IN JS
Understanding classes and its usage
ENCAPSULATION, INHERITANCE
What is Encapsulation and Inheritance
BUILT-IN CLASSES IN JS, JSON, SHALLOW, AND DEEP COPY
Learning built-in JS classes, introduction to JSON and Copy in JS

API, DOM
What is DOM, and how to access it?
DOM SELECTORS
Different types of selectors
EVENT LISTENERS AND EVENT PROPAGATION
Creating and removing Events and different event listeners available

ASSIGNMENT
Project setup, Displaying question and correct option
SHUFFLE OPTIONS, USING JSON
Working for the completion of Project

CALLBACK, PROMISES
What are promises and callbacks in JavaScript, Why to use
ASYNC AWAIT
What are Async-Await in JavaScript, Why that is important.

WHAT ARE MODULES?
Introduction to Modules
IMPORT/EXPORT
Named and default import/Export

INTRO TO JQUERY
What is jQuery and what is the need for it
EVENT HANDLING IN JQUERY
Handling various JS events with jQuery and exploring the library

INTRO TO GIT
What is git and why it’s helpful
BRANCHES
Exploring branches in Git. How to create branches
GIT WORKFLOW
Understanding push, commits, pull requests and using git for teams and individual

Backend:

WHAT IS NODEJS
Understanding Runtime environments and its role, why NodeJS is popular
HOW NODEJS WORKS
Eventloop , Libuv
CREATING SERVER
Creating server using HTTP , returning HTML Content.

TYPES OF MODULES
List of Core modules in NodeJS
FILESSYSTEM , PATH MODULES
CRUD operations using File System , Parsing and Joining Path using path module
NPM, NVM , NODEMON
Using npm init , using nvm for version management , Using nodemon

NODEMAILER
Sending emails in NodeJS
EVENTS IN NODEJS
How events works, Creating custom events
TESTING APIS
Installing Postman and testing Post request.
 

UNDERSTANDING EXPRESS.JS
Installing and creating server using Express.js.
UNDERSTANDING MIDDLEWARE
Understanding app.use, order of middlewares
TYPES OF REQUESTS
How to handle a specific request types and send responses

UNDERSTANDING MVC
Understanding Model , View and Controller
VIEW ENGINES
Understanding EJS – View engine.
CREATING LAYOUTS
Creating layout files and embedding products into layout.

WORKING WITH FORMS
Creating a form view to post new data and controller to receive data
VALIDATION MIDDLEWARE
SRP Violation
EXPRESS VALIDATOR
Installing Express validator, creating validator middleware

FILE UPLOADING
Using Multer, storage configuration.
UNDERSTANDING SESSIONS
Creating session on login, storing & retrieving data in session, express-session
UNDERSTANDING COOKIES
Cookie vs session, creating cookie, storing data in cookie, deleting cookie

UNDERSTANDING REST APIS
Why REST, how it works , applications of REST.
SETTING UP ROUTES
Understanding and setting up routes
QUERY PARAMS
Reading Router params , filter Products using query params

BASIC AUTHENTICATION
Authentication Vs Authorization
UNDERSTANDING JWT
How JWT works and How to use in REST APIs.

USING SWAGGER
Swagger Implementation for NodeJS APIs, Testing Swagger
CORS
what is CORS, Calling APIs from JS App.

CREATING LOGGERS MIDDLEWARE
Creating middleware to log requests in files, and applying it at the controller and route level
CUSTOM ERROR HANDLING MIDDLEWARE
Customizing error handling middleware

TYPES OF DATABASES
SQL vs NOSql
DOCUMENTS AND COLLECTIONS
Creating collections and documents
CRUD IN MONGODB
Create, retrieve, update and delete document

UNDERSTANDING REPOSITORY PATTERNS
Understanding Repository pattern and its advantages
HASH PASSWORDS
Using hash to store passwords

UNDERSTANDING INDEX
What is an index and its advantages, type of index, creating an index
MONGODB OPERATORS
Comparison, Logical, projection and aggregation operators

UNDERSTANDING MONGOOSE
What is ORM, connecting using Mongoose.
CREATING SCHEMAS
Creating various schemas

VALIDATIONS IN MONGOOSE
Implementing Validation in mongoose
REFERENCES AND RELATIONSHIPS
Understanding relationships with examples, Multiple references

SETTING UP SERVER USING SOCKET.IO
What is Socket Programming and its application, How it works, Storing chats in Databases

GRUNT
Setup gruntfile, minifying JS and CSS using grunt
GULP
Setup gulp, file transformation and image optimization using Gulp

AWS EC2
What is deployment and its need, Understanding EC2
CREATING DATABASES
Setting Up mongoDB on AWS and creating Databases.
DEPLOYING NODEJS ON AWS
Building NodeJS files and deploying NodeJS on AWS.

React:

What is React?
Features of React
SPAs vs. MPAs
Difference between Single page and Multi page applications
How React works?
How Virtual DOM and Babel are working under the hood?
Creating First React Element
VS Code Basics, What is JSX?
React Components
Functional Component, React Fragments, React dev tools,

JSX Expressions
Rendering Javascript inside JSX (Variables, data types, functions)
Rendering Arrays and Objects
How to render list of items from an array (using map function) and objects rendering in React
CONDITIONAL RENDERING
Rendering different components based on different conditions

Event Handling
How to handle events in JSX?
Forms in JSX
How to take input and display form data in JSX?
Accessing Input Values
Using refs to access React elements

CDNs and Webpack
Drawbacks of CDNs, Using Module Bundler in React Project
Tools Installation
Installing required tools for creating a React Project
Folder Structure
Understanding the folder and files structure
Import/Export
How to import and export components in files?

Class Based Components
How to create class based components?
Movie-App Project
Creating and adding functionalities to Movie App
State in React
Adding state to components

PROPS
What are props and how do we work with them

Drawbacks of global scope of styling file (CSS)
Understanding CSS Scope to avoid colashes in classNames
Limiting the scope of styling using inLine styling
Creating inline styles for the elements, styling objects in the component.
Styled Components
Writing styled components to limit the scope of styling
Dynamic Styling
Styling Application based on a condition using styled-components
CSS Modules
Modern styling techniques used by developers

COMPONENT LIFECYCLE
Learning about lifecycle of a React component
Mounting Phase
Lifecycle methods involved during execution and their order
Side Effects
How and where to perform side effects
Updating Phase
Methods involved in the updating phase
Un-mounting Phase
Performing clean-ups during un-mounting
Error-handling
Creating Error-Boundary

USEEFFECT, USESTATE AND OTHER HOOKS
What are hooks, why do we use them and various React hooks out there

Introduction to Firebase
Understanding what is firebase and how it actually works
Firebase Setup
Setting up firebase and adding it to the project
CRUD with Firebase
Learning how to create, read, update and delete data from firebase
Querying Data
Querying data from firebase

Routing
Building navigation and showing different pages for different routes.

Context API
Passing Arguments to the component tree without passing props at every level.

What is Redux?
Why Redux is used? What is the Data Flow?
Store, Action, Reducers
Fundamental Principles of Redux, applying them practically
Thunk Middleware
Allows you to write action creators that return a function instead of an action.

Side Effects
How and where to perform side effects