Mern Stack Course Overview
The MERN Stack course provides a comprehensive and hands-on learning experience for developers looking to master the powerful combination of MongoDB, Express.js, React, and Node.js. Starting with the fundamentals of JavaScript and modern web development practices, this course guides you through the intricacies of building dynamic, full-stack applications.
You’ll learn how to utilize MongoDB for robust database management, harness Express.js for efficient server-side scripting, develop interactive and responsive user interfaces with React, and integrate everything seamlessly using Node.js. Practical projects and real-world scenarios ensure that you gain practical experience and build a strong portfolio. Whether you’re an aspiring developer or looking to expand your skill set, this course equips you with the tools and knowledge to create scalable and high-performance web applications.
Throughout the course, you will engage in hands-on exercises and build real-world applications to solidify your understanding of each component of the MERN Stack. Emphasis is placed on best practices, code efficiency, and the latest industry standards to ensure that you are not only learning how to use the technologies but also how to apply them effectively in professional environments.
The course also covers advanced topics such as state management with Redux, authentication and authorization techniques, and deployment strategies to prepare you for complex challenges in web development. By the end of the program, you will have a deep understanding of how to integrate the MERN technologies to create high-performance, scalable, and maintainable web applications, making you a competitive candidate in the tech industry.
In addition to technical skills, the course emphasizes the importance of problem-solving and critical thinking, helping you to approach development challenges with a strategic mindset. You’ll also gain insights into effective collaboration practices through group projects and peer reviews, reflecting real-world team dynamics.
The curriculum is designed to adapt to the evolving tech landscape, incorporating the latest updates and trends in the MERN Stack. Upon completion, you'll not only have the technical expertise to build and deploy sophisticated applications but also a solid understanding of the best practices for maintaining and scaling your projects. This course is ideal for developers eager to advance their career and become proficient in one of the most sought-after technology stacks in the industry.
Mern Stack Course Curriculum
- Introduction HTML
- HTML Basics
- HTML Elements
- HTML5 Semantic
- HTML Attributes
- HTML Headings
- HTML Paragraph
- HTML Styles
- HTML Formatting
- HTML Computer Code
- HTML Comments & Colours
- HTML CSS, Links and Images
- HTML Lists
- HTML Blocks
- HTML Layout
- HTML Responsive
- HTML JavaScript
- HTML Head
- Introduction CSS3
- CSS3 Syntax
- CSS3 Colours
- CSS3 Backgrounds
- CSS3 Borders
- CSS Padding
- CSS Height/Width
- CSS3 Gradients
- CSS3 Shadows
- CSS3 Text
- CSS3 Fonts
- CSS3 2D Transforms
- CSS3 3D Transforms
- CSS Box Model
- CSS Display
- CSS Position
- CSS Align
- CSS Pseudo-class
- CSS Pseudo-element
- CSS Navigation Bar
- CSS Dropdowns
- CSS3 Images
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS3 Animations
- CSS3 Buttons
- CSS3 Multiple Columns
- CSS3 Filters
- CSS3 Media Queries
- CSS3 Responsive
- Introduction to Bootstrap
- Bootstrap Basics
- Bootstrap Grids
- Bootstrap CSS
- Typography
- Tables
- Forms
- Buttons
- Corousel
- Modal
- Tooltip
- History of JavaScript
- Advantages
- Limitations
- Script element
- Creating your first JavaScript
- program
- Coding convention
- Setting up development environment (with VSCode)
Types and Statements
- Keywords in JavaScript
- Overview of Data types
- Primitive Data types
- Non-primitive Data types
- Conditional statements
- Loops
Operators
- Introduction to operators
- Operator precedence and associativity
- Deep dive into operators
- Arithmetic
- Comparison
- Ternary
- Logical
- Language
- Bitwise
Functions - Level I
- Introduction to functions
- Function definition
- Passing values
- Returning values
- Local and global variables
- Functions as objects
- Function constructor
Functions - Level II
- Function invocation patterns
- Arrow functions
- JavaScript scopes
- Function closures
Arrays and Strings
- Introduction to Arrays
- Array declaration
- Array access methods
- Multi-dimensional arrays
- String properties
- String access methods
Event handling
- JavaScript events
- Event handler
- Event flow
- Event bubbling and capturing
- Event types
Document Object Model (DOM)
- Introduction to DOM
- Types of DOM
- DOM standards and methods
- Manipulating documents using DOM
- Handling images
- Table manipulation
- Animation
- Node and Node-list handling
Form Handling
- Introduction to forms
- Form processing
- Forms object
- Accessing data from forms
- Form validation
- Additional features in forms
- Validation APIs
Debugging Techniques
- JavaScript Errors
- Error handling mechanisms
- Introduction to jQuery
- Query Syntax
- Query Selectors
- Query Events
- Query Effects
- Query HTML
- Query Traversing
- jQuery AJAX & Misc
- Introduction to React
- History of React
- Key Benefits of React
- React development environment
- Creating your first React Application
- React Source code structure
JSX
- Introduction to JSX
- Coding in JSX
- Expressions in JSX
- Working with HTML
- Conditional Constructs
Component
- Introduction to components
- Why Components?
- Writing JSX code in components
- Adding CSS
- Populating Data Dynamically Passing data through "props"
- Multiple Components
State and Event Binding
- Introduction to Events
- Event Handlers
- Working with state
- Data Binding
- Controlled and Uncontrolled
- Components
Rendering Lists and Conditional Contents
- Rendering lists of data
- Using stateful list
- Keys in data
- Conditional Contents
- Adding dynamic styles
Debugging Techniques
- Understanding error message
- Code flow and warnings
- Breakpoints
- Using React Dev Tools
HTTP
- Introduction to HTTP
- Methods in HTTP
- Response code in HTTP
- Introduction to REST interfaces
- Characteristics of REST
- Introduction to JSON
- JSON data representation
- GET request
- Using async and await
- Handling Http errors useEffectsO
- POST request
Custom React Hooks
- What are custom hooks?
- Creating and using custom hooks
- Custom HTTP hooks
Forms
- Introduction to Forms
- Working with user input submission
- Adding validation
- Working with custom hooks
Authentication
- What is authentication?
- Why and How?
- Authentication tokens
- Setting up
- Adding signup
- Showing feedback to the user
- Adding User login
- Using tokens
- Redirecting the user
- Adding logout
- Protecting frontend pages
- Persisting User authentication status
- Adding auto logout
Deployment
- Introduction
- Deployment steps
- Adding lazy loading
- Building the code for production
- Getting started with deployment
- Handling routes and finishing deployment
CRUD Operations Using MongoDB
- Installing MongoDB
- Connecting to MongoDB
- Schemas
- Models
- Saving a Document
- Querying Documents
- Comparison Query Operators
- Logical Query Operators
- Regular Expressions
- Updating Documents- Query First
- Updating a Document- Update First
- Removing Documents
Authentication and Authorization
- Introduction
- Creating the User Model
- Registering Users
- Authenticating Users
- Testing the Authentication
- JSON Web Tokens
- Generating Authentication Tokens
- Storing Secrets in Environment Variables
- Setting Response Headers
- Encapsulating Logic in Mongoose Models
- Authorization Middleware
- Protecting Routes
- Getting the Current User
- Logging Out Users
- Role Based Authorization
- Testing the Authorization
Handling and Logging Errors Deployment
- Introduction
- Preparing the App for Production
- Preparing the App for Deployment
- Adding the Code to a Git Repository
- Setting Environment Variables
- MongoDB in the Cloud
- Introduction
- Restful Services
- Introducing Express
- Building First Web Server
- Nodemon
- Environment Variables
- Route Parameters
- Handling HTTP GET Requests
- Handling HTTP POST Requests
- Calling Endpoints Using Postman
- Input Validation
- Handling HTTP PUT Requests
- Handling HTTP Delete Requests
- Middleware
- Creating Custom Middleware
- Built-In Middleware
- Third-party Middleware Environments
- Configuration
- Debugging
- Introduction to components
- Why Components?
- Writing JSX code in components
- Adding CSS·
- Populating Data Dynamically Passing data through "props"
- Multiple Components•
- Synchronous Vs. Asynchronous Code
- Patterns For Dealing with Asynchronous Code
- Callbacks
- Callback Hell
- Promises
- Named Functions to Rescue
- Replacing Callbacks with Promises
- Consuming Promises
- Creating Settled Promises
- Running Parallel Promises Async and Await
- Installing MongoDB
- Connecting to MongoDB
- Schemas
- Models
- Saving a Document
- Querying Documents
- Comparison Query Operators
- Logical Query Operators
- Regular Expressions
- Updating Documents- Query First
- Updating a Document- Update First
- Removing Documents
- What is Node
- Node Architecture
- How Node Works
- Installing Node
- Your First Node Program
- Event Loop
Node Module System
- Introduction
- Global Object
- Modules
- Creating a Module
- Loading a Module
- Module Wrapper Function
- Path Module
- OS Module
- File System Module
- Events Module
- Event Arguments
- Extending Event Emitter
- HTTP Module
Node Package Manager (NPM)
- Introduction
- Package.json
- Installing a Node Package
- Using a Package
- Package Dependencies
- NPM Packages and Source Control
- Semantic Versioning
- Listing the Installed Packages
- Viewing Registry Info for a Package
- Installing a Specific Version of a Package
- Updating Local Packages
- DevDependencies
- Uninstalling a Package
- Working with Global Packages
- Publishing a Package
- Updating a Published Package
- Introduction
- Preparing the App for Production
- Preparing the App for Deployment
- Adding the Code to a Git Repository
- Setting Environment Variables
- MongoDB in the Cloud