MERN Stack Development

Module 1: INTRODUCTION

• What is Full Stack Development?
• Role of a Full Stack Developer
• Overview of Frontend, Backend, and Database
• Understanding Web Architecture (Client-Server Model)
• Tools & Techniques Required

Module 1: INTRODUCTION TO HTML

• What is HTML?
• Browsers and HTML
• HTML Development Environment
• Basic HTML Document Structure

Module 2: HTML SYNTAX AND ESSENTIALS

• Elements, Tags, and Attributes
• Comments
• Headings (<h1> to <h6>)
• Paragraphs (<p>)
• Text Formatting

Module 3: STRUCTURING CONTENT

• Lists
• Links and Anchor Tag (<a>)
• Images (<img>)
• Tables (<table>)

Module 4: FORMS AND USER INPUT

• Introduction to HTML Forms (<form>)
• Input Elements (<input>)
• Other Form Elements

Module 5: SEMANTIC HTML AND ACCESSIBILITY

• Introduction to Semantic and Non-Semantic
• Semantic HTML5 Elements
• Accessibility Basics

Module 6: MULTIMEDIA AND EMBEDDING

• Audio (<audio>)
• Video (<video>)
• Iframe (<iframe>)

Module 1: INTRODUCTION TO CSS

• What is CSS?
• How CSS Works
• CSS Syntax
• Comments in CSS

Module 2: CSS SELECTORS

• Basic Selectors
• Combinators
• Attribute Selectors
• Pseudo-classes
• Pseudo-elements
• Specificity and the Cascade
• Inheritance

Module 3: CORE CSS PROPERTIES

• Colors
• Backgrounds
• Typography (Text Styling)
• Box Model
• Display Property
• Visibility

Module 4: LAYOUT AND POSITIONING

• Basic Positioning
• Floats and Clearfix
• Flexbox (Flexible Box Layout)
• CSS Grid (Grid Layout)

Module 5: RESPONSIVE WEB DESIGN

• Media Queries
• Viewport Meta Tag
• Fluid Images and Videos
• Mobile-First Design Principles

Module 6: ADVANCED CSS CONCEPTS

• Transitions
• Animations
• Transforms
• Shadows
• CSS Variables

Module 1: INTRODUCTION TO JAVASCRIPT

• What is JavaScript?
• Basic Syntax
• Variables and Data Types
• Operators
• Comments

Module 2: CORE JAVASCRIPT CONCEPTS

• Control Flow
• Functions
• Arrays
• Objects

Module 3: WORKING WITH THE DOM (DOCUMENT OBJECT MODEL)

• What is the DOM?
• Selecting Elements
• Manipulating Elements
• Creating and Removing Elements
• Event Handling

Module 4: ADVANCED JAVASCRIPT CONCEPTS

• Error Handling
• Prototypes and Prototypal Inheritance
• Classes (ES6)
• Promises
• Async/Await
• Fetch API
• ES Modules (Import/Export)
• Local Storage and Session Storage
• JSON (JavaScript Object Notation)

Module 5: MODERN JAVASCRIPT FEATURES (ES6+ AND BEyound)

• Template Literals
• Spread and Rest Operators
• Destructuring Assignment (Arrays and Objects)
• Default Parameters
• Sets and Maps

Module 1: GIT INTRODUCTION

• Purpose of Version Control
• Popular Version Control Tools
• Git Distribution Version Control
• Terminologies
• Git Workflow
• Git Architecture

Module 2: GIT REPOSITORY and GitHub

• Git Repo Introduction
• Create a New Repo with the Init command
• Git Essentials: Copy & User Setup
• Mastering Git and GitHub

Module 3: COMMITS, PULL, FETCH, AND PUSH

• Git Repo Introduction
• Create a New Repo with the Init command
• Git Essentials: Copy & User Setup
• Mastering Git and GitHub

Module 4: TAGGING, BRANCHING, AND MERGING

• Organize code with branches
• Check out the branch
• Merge branches

Module 5: UNDOING CHANGES

• Editing Commits
• Commit command, Amend flag
• Git reset and revert

Module 6: GIT WITH GITHUB AND BITBUCKET

• Creating a GitHub Account
• Local and Remote Repo
• Collaborating with other developers
• Bitbucket Git account

Module 1: INTRODUCTION TO BOOTSTRAP

• What is Bootstrap?
• Setting Up Bootstrap

Module 2: BOOTSTRAP GRID SYSTEM

• Understanding the 12-Column Grid
• Containers
• Rows
• Columns
• Responsive Breakpoints
• Column Customization
• Flexbox Utilities for Grid Alignment

Module 3: BOOTSTRAP COMPONENTS FOR RESPONSIVE UI

• Navigation Bars
• Cards
• Forms
• Images
• Tables
• Utilities for Responsive Display & Sizing

Module 4: ADVANCED BOOTSTRAP FEATURES

• Breakpoints
• Responsive Embeds
• Visibility Classes
• Scrollspy
• Utility API & Custom Utilities
• Sass Customization (Brief Introduction)

Module 5: INTEGRATING JAVASCRIPT WITH BOOTSTRAP COMPONENTS

• Modal Dialogs (.modal)
• Carousels
• Collapse/Accordion
• Tooltips and Popovers

Module 1: INTRODUCTION TO TAILWIND CSS

• What is Tailwind CSS?
• Setting Up Tailwind CSS

Module 2: TAILWIND CSS FUNDAMENTALS

• Core Concepts
• Layout and Sizing
• Styling Properties

Module 3: RESPONSIVE DESIGN WITH TAILWIND CSS

• Mobile-First Principle
• Responsive Breakpoints
• Arbitrary Values & Custom Breakpoints

Module 4: INTERACTIVITY & STATES

• Pseudo-classes
• Pseudo-elements
• Dark Mode

Module 1: INTRODUCTION TO REACT

• What is React?
• Setting Up a React Project:
• JSX (JavaScript XML)

Module 2: REACT COMPONENTS & PROPS

• Functional Components vs. Class Components
• Props (Properties)
• Component Composition

Module 3: STATE MANAGEMENT IN COMPONENTS (REACT HOOKS)

• Introduction to React Hooks
• useState Hook
• useEffect Hook
• Event Handling

Module 4: INTRODUCTION TO VERSION CONTROL

• useContext Hook
• useRef Hook
• useCallback and useMemo Hooks
• Custom Hooks

Module 5: REACT ROUTER (CLIENT-SIDE ROUTING)

• Introduction to Routing in SPAs
• Setting Up React Router
• Navigation
• Route Parameters and Nested Routes
• Error Handling

Module 6: FORM HANDLING IN REACT

• Controlled Components
• Uncontrolled Components
• Form Submission: onSubmit events
• Form Validation
• Introduction to Form Libraries

Module 7: DATA FETCHING AND ASYNCHRONOUS OPERATIONS

• Making HTTP Requests
• Handling Loading, Error, and Success States
• Working with APIs

Module 8: ADVANCED STATE MANAGEMENT

• The Need for Centralized State Management
• Introduction to Redux
• Context API vs. Redux

Module 9: STYLING REACT APPLICATIONS

• Standard CSS
• CSS Modules
• Styled Components
• Integrating CSS Frameworks

Module 1: INTRODUCTION TO NODE.JS

• What is Node.js?
• Setting Up Node.js

Module 2: NODE PACKAGE MANAGER (NPM)

• What is NPM?
• Installing Packages
• Managing Dependencies
• node_modules folder
• package-lock.json
• Running Scripts

Module 3: NODE.JS CORE MODULES & ASYNCHRONOUS PROGRAMMING

• Asynchronous JavaScript in Node.js (In-depth)
• Common Core Modules

Module 4: INTRODUCTION TO EXPRESS.JS

• What is Express.js?
• Setting Up Express
• Routing
• Middleware in Detail

Module 5: BUILDING RESTFUL APIS WITH EXPRESS.JS

• RESTful Principles
• API Design Best Practices
• Handling HTTP Requests
• CRUD Operations Implementation
• Modularizing Routes

Module 6: DATABASES WITH NODE.JS & EXPRESS.JS

• Choosing a Database for Node.js
• Integrating Database Interactions into Express Routes

Module 7: AUTHENTICATION AND AUTHORIZATION

• User Registration and Login Flows
• Token-Based Authentication
• Authorization
• Cookies & Sessions

Module 8: ERROR HANDLING IN NODE.JS & EXPRESS.JS

• Understanding Error Types
• Catching Errors
• Express Error Handling Middleware
• Asynchronous Error Handling
• Custom Error Classes

Module 9: CONNECTING FRONTEND

• CORS (Cross-Origin Resource Sharing)
• Making HTTP Requests from the Frontend
• Proxying API Requests (during development)

Module 1: INTRODUCTION MONGODB

• What is NoSQL?
• What is MongoDB?
• MongoDB's Document Model

Module 2: SETTING UP MONGODB

• Installation
• MongoDB Shell (mongosh)

Module 3: CORE MONGODB OPERATIONS (USING MONGODB SHELL)

• Database Commands
• Collection Commands
• CRUD Operations (Create, Read, Update, Delete) on Documents

Module 4: ADVANCED QUERYING AND DATA MANIPULATION

• Query Operators
• Projection
• Sorting
• Limiting and Skipping
• Counting Documents
• Indexing

Module 5: DATA MODELING WITH MONGODB

• Schema Design Principles
• Schema Validation