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
Forms
FORMWhat is an HTML form?FORM FIELDSDiscussing various form elements like <input>, <textarea> etc
Intro to CSS
CSS INTRODUCTIONWhat is CSS and how to use it in HTML?BLOG PAGEBuilding and styling the blog project
Styling with CSS
CSS UNITS
Learning about various CSS units used to style HTML elements
CSS BOX MODE
Understanding the CSS box model
Starting with the Resume project
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
Getting started with JavaScript
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, Arrays, Function & Objects
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
Exploring More Modules
NODEMAILERSending emails in NodeJSEVENTS IN NODEJSHow events works, Creating custom eventsTESTING APISInstalling Postman and testing Post request.
Getting Started with Express
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 Upload, Session and Cookies
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.
Adding More features to E-Com App
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
Getting Started with Databases
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,
Learning JSX
JSX ExpressionsRendering Javascript inside JSX (Variables, data types, functions)Rendering Arrays and ObjectsHow to render list of items from an array (using map function) and objects rendering in ReactCONDITIONAL RENDERINGRendering different components based on different conditions
Score-Keeper App
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
Styling in React
Drawbacks of global scope of styling file (CSS)Understanding CSS Scope to avoid colashes in classNamesLimiting the scope of styling using inLine stylingCreating inline styles for the elements, styling objects in the component.Styled ComponentsWriting styled components to limit the scope of stylingDynamic StylingStyling Application based on a condition using styled-componentsCSS ModulesModern styling techniques used by developers
Component Lifecycle Methods
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