Course Syllabus
A MERN Full Stack course teaches you to build modern web applications using the MERN stack: MongoDB, Express.js, React, and Node.js. You'll learn how to create scalable and interactive front-end interfaces with React, manage server-side logic with Node.js and Express.js, and handle data storage and retrieval with MongoDB. The course covers both front-end and back-end development, including API creation, database integration, and deployment techniques. By the end, you'll be proficient in developing and deploying comprehensive, full-stack web applications.
HTML, CSS and JavaScript Syllabus
- Introduction to HTML
- History of HTML
- Components of HTML
- Structure of HTML
- Body section
- Categories of Tag in Body Section
- How to display images
- Creating List
- Ordered List
- Unordered List
- Definition List
- How to work with background?
- How to print special characters?
- Creating Tables in HTML
- Attributes of Table
- Generating Irregular Tables
- How to work with forms?
- How to work input controls?
- Using <select> Tag
- Generating Drop Down List
- Generating Scrollable List
- How to work text area?
- Introduction to HTML 5
- Improvements Given by HTML 5
- Web Forms 2.0
- New Input Elements
- New Form Attributes
- DataList Tag
- Playing Audio
- Controlling Audio
- Playing Video
- Introduction to CSS
- Advantages of CSS
- Versions of CSS
- Versions of CSS
- Types of CSS
- CSS Selectors
- Project
- Inheritance in CSS
- CSS Units
- Absolute v/s Relative Units
- Styling Background using CSS
- Handling Font in CSS
- Various Font Properties
- What are Google Fonts
- How to use Google Fonts
- Project
- Handling Text in CSS
- Various Text Properties
- Removing Underline from Links
- Handling Link in CSS
- Pseudo-Classes
- Making Links Look Like Button
- Styling Lists in CSS
- Making Nav Bar Using List
- Styling Tables in CSS
- Styling Table Border
- Creating Zebra Striped Tables
- Making Tables Responsive
- Project
- The <div> and <span> Tags
- The Difference
- Introduction to semantic HTML
- Popular Semantic HTML Tags
- The CSS Box Model
- Border, Padding and Margin
- Handling Overflow
- Setting Element Pos using Float
- The Visibility Property
- The Display Property
- Positioning in CSS
- Various Types of Positioning in CSS
- Other properties used with Positioning
- Styling form in CSS
- Attribute Selectors
- Styling Controls
- What is JavaScript?
- Who runs our JavaScript code?
- Relationship with HTML and CSS
- What JavaScript can do in Browser?
- What JavaScript can't do?
- Java v/s JavaScript
- History of JavaScript
- JavaScript Embedding
- Writing to the document
- Using Browser Console
- Comments in JavaScript
- Declaring variables in JavaScript
- Data Types
- Primitive Data Types and Non-Primitive Data Types
- Difference between null and undefined
- Var v/s let
- Types of Dialog Box
- Accepting Numeric input through Dialog box
- Using Template String
- Types of Operators
- Type Conversion & Type Coercion
- Standard rules of Number Conversion
- Controlling Decimal Points
- If
- If else
- If else if else
- Nested if
- Ternary Operator
- Switch
- While loop
- Do while loop
- For loop
- For/of loop
- For/in loop
- Array Definition
- Creating Array
- Using Loop with array
- Array with mixed type
- Creating Array using Constructor
- Array Methods
- What is Function?
- Function calling
- Calling Function from link
- Variable scope
- Returning values
- Calling function via Button
- Anonymous Functions
- Some important built-in functions
- Objects in JavaScript
- Creating Objects
- Adding properties, changing properties, and Deleting properties
- Adding methods
- Nested Objects
- Creating object using object literal
- The toString() method
- Overriding toString()
- Object equality in JavaScript
- What is JSON?
- The 'this' keyword and using of 'this' keyword
- The Arrow function
- Restriction on Arrow function
- Callback function
- Anonymous function as callbacks
- Why we need callback?
- The Date object
- The String object
- The Math object
- DOM introduction
- What is DOM?
- What can be done with DOM?
- DOM selection methods
- Setting/Getting Text Content
- Changing CSS
- Adding & Removing classes
- Traversing the DOM
- DOM properties
- DOM properties drawback
- Modern DOM properties
- Creating new element
- append() & preprend()
- Event Introduction
- Event categories
- Ways of handling events
- Using function for event handling
- Cancelling the default behaviour
- Using DOM event handler
- Working with MouseEvents
- Working with KeyBoard Events
- Determining the key Pressed
- Using DOM level 2 event handler
- The event object
- Event Bubbling
- Event delegation
- Accessing form object through JavaScript
- Accessing Form data
- The submit event & how to handle submit event
- Other form events
- Creating A ToDo List App
- Apply All The Concepts Learnt Till Now
React JS Syallabus
- What Is React ?
- What Problem React Solves ?
- What Are Single Page Application’s ?
- Challenges In Developing A SPA
- React Advantages.
- Is React A Framework OR Library ?
- Two Ways To Develop A React App.
- Developing Using CDN.
- Developing Using Create React App.
- Difference between CDN And Create React App
- Developing The First App
- Creating Function Based React Element
- Creating Siblings
- Creating Nested Components
- What is JSX ?
- Why JSX ?
- Characteristics Of JSX ?
- Coding JSX
- Expressions In JSX
- Inserting A Large Block Of HTML
- Conditional Rendering
- Different Ways Of Conditional Rendering
- Modules
- Exports and Imports
- Classes
- Spread & Rest Operators
- Destructuring
- Two Types Of Components
- Class Components
- How To Create Class Components
- Industry Recommended Way Of Structuring A React Application
- What are props ?
- Using Props In React
- Some Important Points About Props
- How To Iterate Over Arrays In JSX
- Using map() Method Of Array
- Default props
- Styling In React
- Different Ways Of Styling
- Inline Styling
- JS Object Styling
- Introduction To CRA
- Installation Of Node Package Manager
- Creating A New Project Using Create-React-App
- Introduction To CRA
- Installation Of Node Package Manager
- Creating A New Project Using Create-React-App.
- Exercise To Better Understand Request Flow
- CRA Conventions
- How To Load Images In CRA ?
- How To Add CSS Files In CRA ?
- What Is State ?
- How It Is Different Than Props ?
- Different Ways Of Initializing State
- Why To Update The State ?
- Correct Way To Update The State
- Points To Remember
- Event Handling Basics
- How React's Event Handling Differs From JS ?
- Concept Of Binding
- Passing Arguments To Event Handlers
- Different Ways Of Passing Arguments
- React Keyboard Events
- Getting The Key Pressed
- React Design Principles
- Recommended Way Of State Updation
- What To Keep In State ?
- Data Flow In State
- React Design Principles
- Recommended Way Of State Updation
- What To Keep In State ?
- Data Flow In State
- Form Recap
- How Forms Work In React ?
- Uncontrolled Components V/s Controlled Components
- Adding Multiple Fields
- Creating Dynamic Keys
- Modifying The ToDo List App Using React
- Apply All The Concepts Learnt Till Now
- Uncontrolled Components
- Creating Ref
- Accessing Ref
- TextArea In HTML
- TextArea In React
- DropDown List In HTML
- DropDownList In React
- React Component Life Cycle Phases
- React Component Life Cycle Methods
- Mounting Phase Methods
- Updating Phase Methods
- Unmounting Phase Methods
- What Is A Fragment ?
- Need Of A Fragment
- Syntax
- Introduction
- What Is localStorage ?
- Methods Of localStorage
- Introduction To Hooks
- What Exactly Are Hooks ?
- Rules Of Hooks
- Types Of Hooks
- Introduction To useState() Hook
- Syntax Of useState()
- Introduction To useEffect()
- Syntax
- Use Of Dependencies Argument
- Performing Clean Up
- Introduction To Context API In React
- The useContext() Hook
- Project
- Introduction To Reducer In JS
- The reduce() Method
- Understanding useReducer() Hook
- Project
- Multi page React sites
- React Router Setup
- Links and Nav Links
- Switch and exact match
- Fetching Data
- Route Parameters
- Introduction to React Router 6
- The Route Component
- Redirects and use Navigate
- Fetch API in React to populate data
Node JS, Express JS and Mongo DB Syllabus
- Introduction
- Who this course is for
- How Node.JS Works
- Node V8 Engine
- Installation Node.JS
- What is REPL - Read Evaluate Print Line
- Loading Files - Using REPL
- Process Objec
- Global Namespace
- Buffers
- Understanding Callbacks
- Introduction
- Making use of NPM - Node Package Manager
- Publishing node modules
- Module Caching
- Module Cashing - Overcoming the limitations
- Module Patterns
- Events and EventEmitter
- EventEmitter and Inheritance
- Creating your own EventEmitter
- Creating Classes in ES6
- ES6 Classes and EventEmitter
- Introduction to Streams
- Readable Streams
- Writeable Streams
- Piping
- Chaining
- Set Encoding
- Additional Methods of Readable Streams
- Duplex Streams
- Introduction
- Promises
- Generators
- Resolving Callback Hell
- How a Web Server works
- Creating our WebServer
- Sending HTML content as response from WebServer
- Serving Static Contents
- Post data to Node Web Server
- Handling Querystring
- Introduction to Express
- Installing Express
- Creating a Web Server using Express
- Adding routes to Express App
- Working with Express Templates
- Working with partials
- Sharing content across routes
- Organizing our routes
- Making use of Express Generator
- Express Middleware
- Developing a project using Express
- Apply All the Concepts Learnt till Now
- Understanding assets of our Express Web Application
- Structuring our express web application
- Introduction to Database
- Download and installing MySQL and Workbench on windows
- Connecting MySQL with our Express Application
- Introduction to NoSQL Database
- Installing to MongoDB Locally
- Working with MongoDB and Mongoose
- Using Mongolab - MongoDB as a Service
- Setting up our Authentication Application
- Creating User Model in Mongoose
- Developing Strategies - I - Login Strategy
- Developing Strategies - II - Signup Strategy
- Creating Routes
- Creating our Login/Signup Layout and Finishing the Application
| HTML Lecture - 1 | Preview |
| HTML Lecture - 2 | Preview |
| HTML Lecture - 3 | Preview |
| HTML Lecture - 4.1 | Preview |
| HTML Lecture - 4.2 | Preview |
| HTML Lecture - 5 | Preview |
From Basics to Advanced MERN Full Stack Development
- Full Stack Mastery: Learn MERN stack development, covering MongoDB, Express.js, React.js, and Node.js from basics to advanced.
- Zero to Hero: Progress from a beginner to a proficient full stack developer with MERN technologies.
- Comprehensive Coverage: Gain expertise in building scalable applications with MongoDB, Express, React, and Node.js, from database management to frontend development.
Live Lectures
- 100 + Hours: Engage in live, interactive sessions with industry experts specializing in the MERN stack.
- Hands-on Practice: Apply MERN stack concepts during live coding sessions and build full stack applications.
- Practice Sessions: Participate in dedicated practice sessions to enhance your skills in both frontend and backend development.
Doubt Solving
- Unlimited Doubt Clearing Sessions: Get all your questions resolved with support from experienced instructors.
Test Series and Assignments
- Topic-Wise Test Series: Assess your understanding with tests after each major topic in the MERN stack.
- Assignments: Apply your learning through practical assignments, including building and deploying MERN stack applications.
Lecture Notes
- Detailed Notes: Access comprehensive notes for every lecture, covering all aspects of MERN stack development.
Projects
- Real-World Projects: Work on live projects to build and deploy full stack applications using the MERN stack.
- API Integration: Learn to create and integrate RESTful APIs using Express and Node.js with your React frontend.
- Best Practices: Implement industry-standard best practices for developing scalable and maintainable MERN stack applications.
Certifications
- Dual Certification: Receive two certificates upon successful completion of the course and projects.
- MERN Full Stack Development Completion Certificate: Earn a certificate for mastering MERN stack development.
- Project Completion Certificate: Get certified for successfully completing your MERN stack project.
Computer / Laptop Requirments
- System With Minimum I3 Processor Or Better
- At Least 4 Gb Of Ram
Text Editor/IDE
- Visual Studio Code: A lightweight and popular code editor, widely used for web development.
- WebStorm: A powerful IDE specifically designed for JavaScript development (optional).
Node.js and npm
- Node.js: The runtime environment for running JavaScript on the server. Installing Node.js also installs npm (Node Package Manager), which is required for managing project dependencies.
- Yarn (optional): An alternative to npm for managing dependencies.
MongoDB
- MongoDB Community Edition: The NoSQL database that is part of the MERN stack.
- MongoDB Atlas: A cloud-hosted MongoDB service if you prefer not to host it locally.
- Robo 3T: A GUI tool for managing MongoDB databases.
Express.js
- Express.js: A lightweight web framework for Node.js. Installed via npm with
npm install express.
React.js
- React.js: The JavaScript library for building user interfaces. Installed via npm with
npx create-react-appornpm install react.
Database GUI Tools (Optional)
- MongoDB Compass: A visual tool to explore and manage MongoDB databases.
- Robo 3T: Another popular GUI tool for interacting with MongoDB.
Version Control System
Browser
- Google Chrome: A modern browser with built-in developer tools.
- Mozilla Firefox: Another excellent browser with useful development tools.
API Testing Tools (Optional)
Ready to kick-start your career?
Join Us Now Join Us Now
