MERN Full Stack Development Course | Master React, Node, MongoDB

HTML Fundamentals

Introduction to HTML

• What is HTML?
• Structure of an HTML Document
• Basic Tags

HTML Elements & Attributes

• Common HTML Elements
• Attributes (id, class, style, title)

Page Creation with Formatting Elements

• Text Formatting
• Line Breaks & Horizontal Rules
• Special Characters ( , ©)

Links & Navigation

• Creating Hyperlinks
• Internal vs External Links
• Redirecting Pages (Meta Refresh, JavaScript)

Working with Images

• Inserting Images
• Adjusting Image Size & Alignment
• Image as a Link

Organizing Data with Tables

• Table Structure
• Table Styling (Borders, Spacing, Alignment)

Displaying Data in Lists

• Ordered & Unordered Lists
• Definition Lists

Creating Forms & Layouts

• Form Elements
• Input Types (Text, Email, Password, Radio, Checkbox)
• Form Submission (GET vs POST)

Semantic HTML Elements

• Introduction to Semantic Tags
• Benefits of Semantic HTML

Working with Media (Audio & Video)

• Embedding Audio (<audio>)
• Embedding Video (<video>)
• Using <iframe> for External Media

CSS Styling & Layouts

Introduction to CSS

• What is CSS?
• Inline, Embedded, and External CSS
• CSS Selectors (Tag, Class, ID)

Applying Colors in CSS

• Color Naming (Red, Blue, etc.)
• RGB & RGBA Values
• Hexadecimal Colors (#FF0000)

CSS Properties & Styling

• Box Model (Padding, Margin, Border)
• Text & Font Styling (font-family, font-size, text-align)
• Background Properties (background-color, background-image)

Display & Positioning

• Display Types (block, inline, inline-block, flex, grid)
• Positioning (static, relative, absolute, fixed, sticky)
• Float & Clear Properties

Creating Web Page Layouts

• Single Column & Multi-Column Layouts
• Flexbox Basics
• Grid Layout Basics

Responsive Design with Media Queries

• Understanding Breakpoints
• Mobile-First vs Desktop-First Approach
• Responsive Images & Text

Bootstrap Framework

Introduction to Bootstrap

• What is Bootstrap?
• Advantages of Using Bootstrap
• Mobile-First Approach

Bootstrap Setup & Grid System

• Adding Bootstrap to HTML (CDN Links)
• Container Types (Fixed, Fluid)
• Grid System (container, row, col-*)

Bootstrap Components

• Tables & Lists Styling
• Forms & Input Styling
• Images & Media Handling

Advanced Bootstrap Components

• Navigation Bars & Dropdowns
• Modals & Popups
• Cards & Tabs

Responsive Design with Bootstrap

• Using Breakpoints (sm, md, lg, xl)
• Hiding & Showing Elements (d-none, d-block)
• Bootstrap Utilities (Spacing, Text Alignment)

JavaScript and DOM

• Writing Programs and Displaying Data
• Understanding Keywords and Identifiers
• Variable Declarations: var, let, const
• Implementing Statements (Loop & Decision Making Statements)
• Working with Arrays and Implementing with Examples
• Understanding Functions in JavaScript
• Object-Oriented Programming (OOP)
• Creating the concept with Class, Object and Methods
• Proptotype, Closures concepts implementation
• Promise, and Async and Await concepts implementation

Ecmascript

• Ecmascript Introduction
• Declarations of Identifiers with let & const
• Working with Loops
• Functions, Passing Parameters, Return Statement, Arrow Functions, Call Back Functions
• Spread Operators
• Map Object with Set and Get
• Promise, Async and Await with Promise

Introduction to ReactJS

• What is ReactJS?
• Scope of ReactJS (Why Learn React?)
• Understanding Single Page Applications (SPA)
• ReactJS Architecture Overview

Setting Up & First React Project

• Setting up the ReactJS Environment (Node, npm, create-react-app)
• Creating Your First React Project
• Understanding Project Folder & File Structure
• Working with Assets (HTML, CSS, Images, JS)

React Components – Building Blocks

• What is a Component? (Class vs. Functional)
• Creating & Reusing Components
• Component Composition (Nesting Components)

Dynamic Components with Props & State

• Understanding props (Parent-to-Child Communication)
• Working with state (Component Data Management)
• One-Way vs. Two-Way Data Binding

Event Handling & Methods

• React Event Handlers (onClick, onChange, etc.)
• Creating Methods in Components
• Passing Parameters to Methods

Forms & User Inputs

• Controlled vs. Uncontrolled Components
• Form Handling & Validation
• Regular Expressions for Input Fields

Routing in React Apps

• Introduction to React Router
• Setting Up Routes & Navigation
• Dynamic Routing & Route Parameters

Styling in React

• CSS Inline Styling
• Introduction to Styled Components
• UI Frameworks (Material UI Basics)

Working with APIs & Services

• Fetching Data from REST APIs
• Using axios for HTTP Requests
• Creating & Consuming Services

State Management with Redux

• What is Redux? (Actions, Reducers, Store)
• Implementing Redux in React
• Async Actions with Redux Saga

React Hooks (Modern React)

• Introduction to Hooks (useState, useEffect)
• Advanced Hooks (useContext, useReducer)
• Custom Hooks

Advanced React Concepts

• Context API (Global State Management)
• Error Boundaries & Optimization Techniques
• React Developer Tools

Testing & Debugging

• Unit Testing in React (Jest, React Testing Library)
• Debugging React Applications

Building & Deploying React Apps

• Understanding Babel & Webpack
• Optimizing Performance
• Deploying React Apps (Netlify, Vercel)

Capstone Project – Full SPA Development

• Planning & Structuring a React App
• Implementing CRUD Operations
• Integrating All Concepts (Routing, API, Redux)

NodeJs

• Introduction to NodeJs
• What is NodeJs? Advantages of NodeJs
• Traditional Web Server Model
• NodeJs Process Model

Setup Dev., Environment

• Install NodeJs on Windows, Mac and Linux
• Working with REPL
• NodeJs Console

NodeJs Modules

• Functions
• Buffer
• Modules
• Module Types
• Core Modules
• Local Modules
• exports

Node Package Manager

• What is NPM?
• Installing Packages Locally
• Adding Dependency in package.json
• Installing packages globally
• Updating packages

Creating Web Server

• Creating Web Server
• Handling Http Requests
• Sending Requests

File System

• Reading a File Asynchronously / Synchronously
• Writing a File Asynchronously / Synchronously
• Opening a File
• Deleting a File
• IO Operations

Debugging NodeJs Application

• Core NodeJs Debugger
• Debugging with Visual Studio Code

Events

• EventEmitter Class
• Returning EventEmitter
• Inhering Events

ExpressJs

• Introduction to ExpressJs
• , Setup of ExpressJs
• Creating a Sample Program in ExpressJs
• Creating a Static Routing & Dynamic Roting
• Working with HTTP Methods
• Creating the URL Building
• Using Middleware Functions
• Creating a Templating
• Working with Static Files
• Parsing Form Data
• Parsing & Fetching & Connecting with Database
• Cookies & Sessions
• Authentication
• RestFul Api’s
• Scaffolding
• Error Handling
• Debugging

• Introduction to MongoDb
• Differences between Sql vs NoSql
• Features & Advantages of MongoDb
• Installing MongoDb along with Compass
• Understanding the Terminology: Database, Collection, Document, etc.,
• Commands in MongoDb
• Creating Database, Drop Database
• Creating Collection, Drop Collection
• Insert, Update, Delete the Documents
• Writing Conditions while Retrieving, Updating the Documents
• Data Aggregation
• $match, $project, $group, $unwind, $sort, $limit, $set, $lookup
• $count, $distinct,
• Working with Indexes, Types of Indexes