CSS Navigation Bar Navigation Bar / Menu Bar CSS Dropdowns CSS Website Layout CSS Flexbox CSS Media Queries CSS Responsive

Get Started with Bootstrap Box-sizing Breakpoints Containers Grid & Columns, Gutters, Z-index Typography & Tables

Introduction | Tailwind CSS Tailwind Installation Utility-First Approach Responsive variants – Tailwind Breakpoints Hover focus & other state variants Dark mode variant Assignment Based on this topic

Composing Utilities with @apply Directive Tailwind @layer Directive – Understand Tailwind Layers @responsive and @screen Directives theme() and screen() – Tailwind Functions Tailwind Configurations – Advanced Concepts Assignment Based on this topic

PostCSS Installation – Advanced Concepts Just in Time – Advanced Concepts Theme Configuration – Advanced Concepts Extend Theme – Advanced Concepts Extend Variants – Advanced Concepts Tailwind CSS 3 tutorial – Upgrade to Tailwind 3

JavaScript Function and Function Expressions JavaScript Variable Scope

JavaScript Array JavaScript String JavaScript for…in Loop

JavaScript ES6 JavaScript Arrow Function JavaScript Default Parameters JavaScript Template Literals JavaScript Spread Operator JavaScript Map Destructuring Assignment JavaScript for…of

JavaScript JSON JavaScript Date and Time Iterators and Iterables JavaScript Generators JavaScript Browser Debugging

What Is React and How It Works React Virtual DOM Explained – Easy Explanation React ESLint, Formatting With Prettier, Editor & Project Setup React Prerequisites React JSX Element & Rendering Elements React Components and Props Core Concept

React State & Lifecycle in Class Component React Render Props What Is Context API – Why Context API How to Use React Context API contextType & useContext Hook

What Is React Hook – React Hook Introduction React useEffect Hook React useRef Hook React Custom Hook

React 18 New Features – What’s New in React React Event Handling & Control Re Rendering React Conditional Rendering, List and Keys

React Form Handling – Controlled vs Uncontrolled Component React Lifting State Up Service Side Rendering

Fetch Data from API in React React with Firebase

Node.js Introduction How Node.js Works Node.js Installation – VS Code Editor Setup Node.js Global Object & Module System

Node.js Server & Core Modules A Node.js Application Analysis – Understanding NodeJS

Express() Function Application Object Request Object Response Object

Middleware Concept Router Concept Error Handling

Authenticate with JSON Web Token (JWT) – Node.js Express.js

MERN Stack Development

Home > Courses > Software Development > MERN Stack Development

MERN Stack Development

From Database Design to Front-End Magic - Learn the Ins and Outs of Every Layer!

The MERN Stack course provides a comprehensive, hands-on learning experience in full-stack web development using MongoDB, Express, React, and Node.js. This course is designed to equip you with the skills necessary to build dynamic, scalable web applications from the ground up. You will learn how to design databases with MongoDB, create server-side applications with Express and Node.js, and develop interactive front-end interfaces using React. Additionally, you will gain practical experience in building RESTful APIs and managing application state with Redux.Throughout the course, you will also focus on deployment, scaling, and best practices in web development, ensuring that you are ready to take on real-world projects.

Whether you’re pursuing career advancement, freelancing opportunities, or personal growth, this course equips you with the practical expertise to succeed and become job-ready.

Watch Promo

Enroll Now

Acquire a skill and become job-ready with professional certifications

Online

BDT 35,000

On-Campus

BDT 50,000

Share this course

Key Features

Tools Covered

What you'll learn

After completing the course, learners will be able to:

Learning Path

Get introduced with CodersTrust & Course

Orientation
Course Introductions

Introduction To HTML - 01

Browsers and HTML
Editors Offline and Online
Tags Attribute and Elements
Comments
Paragraph
Heading
Formatting Text

Introduction To HTML - 02

Lists
Links
Images
HTML Layout Elements
HTML Semantic Elements
Tables
HTML Forms
HTML Media
HTML Element Reference
HTML Attribute Reference

Basic Concept of Cascading Style Sheet (CSS)

Introduction CSS
Applying CSS to HTML
Selectors properties and values
CSS Colors
CSS Backgrounds
CSS Box Model
CSS Margins Padding Borders
CSS Text and Font Properties
CSS General Topics

Advance CSS

CSS Navigation Bar
Navigation Bar / Menu Bar
CSS Dropdowns
CSS Website Layout
CSS Flexbox
CSS Media Queries
CSS Responsive

Project

Portfolio Landing Page

Learn About Version Controlling System - 01

Git, Source Control, GitHub
Installing Git, Create GitHub Repository
Git Init, git Add, Git Commit
Set Origin, Git Push, Git Pull, Repo Overview

Learn About Version Controlling System - 02

Send Project Code GitHub
Host the website With Github Action With Cpanel CI/CD
Common GitHub Related Issues
Git Branch, Merge Branches
Git Pull, Toggle Branch, Merge Conflict

Learning Bootstrap

Get Started with Bootstrap
Box-sizing
Breakpoints
Containers
Grid & Columns, Gutters, Z-index
Typography & Tables

Learning Bootstrap Forms

Form Control, Select, Checks & Radios
Input Group, Validation, Layout
Accordion, Alerts, Buttons B68
Alerts, Buttons, Button Group, Offcanvas
Card, Carousel, Collapse, Dropdowns
List Group, Modal, Navs & Tabs, Tooltips

Learning Bootstrap Components

Navs & Tabs, Offcanvas, Tooltips
Backgrounds, Display, Flex, Float
Opacity, Overflow, Position, Vertical Align
Shadows, Sizing, Spacing, Text, Visibility

Tailwind CSS - 01

Introduction | Tailwind CSS
Tailwind Installation
Utility-First Approach
Responsive variants – Tailwind Breakpoints
Hover focus & other state variants
Dark mode variant

Assignment Based on this topic

Tailwind CSS - 02

Composing Utilities with @apply Directive
Tailwind @layer Directive – Understand Tailwind Layers
@responsive and @screen Directives
theme() and screen() – Tailwind Functions
Tailwind Configurations – Advanced Concepts

Assignment Based on this topic

Tailwind CSS - 03

PostCSS Installation – Advanced Concepts
Just in Time – Advanced Concepts
Theme Configuration – Advanced Concepts
Extend Theme – Advanced Concepts
Extend Variants – Advanced Concepts
Tailwind CSS 3 tutorial – Upgrade to Tailwind 3

Introduction to JavaScript

Getting Started with JavaScript
JS Variables & Constants
JS console Log
JavaScript Data types
JavaScript Operators
JavaScript Comments
JavaScript Type Conversions

JavaScript Control Flow

JavaScript Comparison and Logical Operators
JavaScript if else Statement
JavaScript for loop
JavaScript while and do…while loop
JavaScript break Statement
JavaScript continue Statement
JavaScript Switch Statement

JavaScript Functions

JavaScript Function and Function Expressions
JavaScript Variable Scope

JavaScript Objects

JavaScript Objects

JavaScript Types

JavaScript Array
JavaScript String
JavaScript for…in Loop

JavaScript Exceptions & Modules

JavaScript Throw Statement
JavaScript Modules

JavaScript ES6

JavaScript ES6
JavaScript Arrow Function
JavaScript Default Parameters
JavaScript Template Literals
JavaScript Spread Operator
JavaScript Map
Destructuring Assignment
JavaScript for…of

JavaScript Asynchronous

JavaScript setTimeout()
JavaScript CallBack Function
JavaScript Promise
JavaScript async/await

JS Document Object Model (DOM)

What Is DOM
Analyze the DOM
Traversing DOM Elements
Traversing DOM Hierarchy
Manipulate the DOM
Listening to DOM Events
DOM Project

JS Miscellaneous

JavaScript JSON
JavaScript Date and Time
Iterators and Iterables
JavaScript Generators
JavaScript Browser Debugging

React Js

What Is React and How It Works
React Virtual DOM Explained – Easy Explanation
React ESLint, Formatting With Prettier, Editor & Project Setup
React Prerequisites
React JSX Element & Rendering Elements
React Components and Props Core Concept

React Context API

React State & Lifecycle in Class Component
React Render Props
What Is Context API – Why Context API
How to Use React Context API
contextType & useContext Hook

React Hooks

What Is React Hook – React Hook Introduction
React useEffect Hook
React useRef Hook
React Custom Hook

Styling React Components & React Router

Stylesheets Inline Style & CSS Modules
React Styling – CSS in JS
React Router DOM Complete Guide
Router DOM v6 – Breaking Changes – React Router 6 vs 5
React Router v6 Private Route

State Management

React 18 New Features – What’s New in React
React Event Handling & Control Re Rendering
React Conditional Rendering, List and Keys

Rendering React

React Form Handling – Controlled vs Uncontrolled Component
React Lifting State Up
Service Side Rendering

Testing React Project

Webpack
Unit Testing

Google Firebase

Fetch Data from API in React
React with Firebase

React Full Project - 01

Project Day 1

React Full Project - 02

Project Day 2

JavaScript Runtime

Node.js Introduction
How Node.js Works
Node.js Installation – VS Code Editor Setup
Node.js Global Object & Module System

JavaScript Runtime

Node.js Server & Core Modules
A Node.js Application Analysis – Understanding NodeJS

Express JS - 01

Express() Function
Application Object
Request Object
Response Object

Express JS - 02

Middleware Concept
Router Concept
Error Handling

MERN Project - 01

Requirement Analysis

MERN Project - 02

Complete Project Setup

MERN Project - 03

User Management & Validation

MERN Project - 04

Authenticate with JSON Web Token (JWT) – Node.js Express.js

Career Advising (CA) - 01

Branding, Linkedin, Remote Job Opportunity

Career Advising (CA) - 02

Portfolio, Payoneer

Career Advising (CA) - 03

Fiverr Account Creation, Fiverr TOS Discussion

Career Advising (CA) - 04

Fiverr Gig Creation, Buyer Communication, Order Delivery, Payment Method

Career Advising (CA) - 05

Upwork Account Creation, Bidding, Follow Up

Career Advising (CA) - 06

Follow Up

Who Will Benefit

The course is designed to benefit a wide range of individuals seeking to thrive in the digital landscape. Potential beneficiaries include:

Skill Level

Eligibility

Prerequisite

Develop Your Knowledge and Skills for a Successful Career

Earn a certificate and get ready for your dream job!

Training 1.5M+ Learners and Professionals in 15+ Countries

Build Your Future!

Enroll in CodersTrust Digital Skills courses and get globally accepted certifications.

Frequently Asked Questions

What is the MERN stack?

The MERN stack is a collection of four technologies used for web development: MongoDB (database), Express.js (web server framework), React.js (front-end library), and Node.js (JavaScript runtime). Together, these technologies allow developers to build full-stack web applications using JavaScript throughout.

Do I need prior experience to join this course?

While basic knowledge of HTML, CSS, and JavaScript is helpful, this course is designed for beginners to intermediate learners. We will cover all necessary concepts from the ground up, including front-end, back-end, and database development.

Will I learn how to deploy my applications?

Yes! The course covers deploying your applications to cloud platforms, optimizing for performance, and scaling your applications.

What kind of projects will I build during this course?

You will build real-world projects, including a full-stack web application with MongoDB, Express, React, and Node.js. ThIs projects will help you apply what you learn and create a strong portfolio to showcase your skills.

Can I use this course to become a full-stack developer?

Absolutely! This course will provide you with the skills necessary to work as a full-stack developer, capable of handling both front-end and back-end development. You will also learn essential concepts like state management, RESTful API design, and version control using Git.

Will I learn about database management in this course?

Yes, you will learn how to design and manage databases using MongoDB, a NoSQL database that integrates well with JavaScript-based technologies. You’ll also gain experience working with database queries and data modeling.

What tools and technologies will I learn?

You’ll gain expertise in the following tools and technologies:

MongoDB for database management
Express.js and Node.js for backend development
React.js for front-end development
Bootstrap & Tailwind CSS for building modern, responsive user interfaces
Git and GitHub for version control and project management

Is this course suitable for freelancing opportunities?

Yes, this course provides you with practical, in-demand skills that can be used for freelancing. You’ll learn how to build end-to-end applications, manage client projects, and deliver full-stack solutions, making you highly competitive in the freelancing market.

What is the course schedule?

We offer flexible learning options with on-campus and online classes, available in weekday (2 sessions per week, 3 hours on-campus or 2 hours online) or weekend (1 session per week, 4 hours on-campus or 3 hours online) cohorts to fit your schedule.

Will I receive a certificate after completing the course?

Yes, upon successful completion of the course, you will receive a certificate that showcases your proficiency in full-stack development using the MERN stack. This certification can be used to enhance your resume or LinkedIn profile.

Innovating to Transform High-Potential Youth into Skilled Digital Workforce Worldwide

CONTACT

40 Wall Street, Suite 2004

New York 10005, USA

House# 82, Road# 19/A, Block# E

Banani, Dhaka-1213

Bangladesh

Unsubscribe anytime

We Accept

Follow Us!

FOLLOW

Follow Us!

FOLLOW