MERN Full Stack
Syllabus
By Learn Coding
LEARN CODING
Ankush Kushwah Akhilesh Kushwah
Click Here Click Here
YouTube Link
Telegram Link
GitHub Link
Facebook Link
Module 1
Introduction to Web Development
What is Web Development ?
Static vs Dynamic Website ?
Who is Front-end Developer ?
Who is Back-end Developer ?
Who is Full-StaDeveloper ?
MERN Stack
MEAN Stack is a User friendly JavaScript framework which is
used to develope web applications.
ean stands for MongoDB, Express JS Angular JS and
M
Node.js Mean is an end-to-end JavaScript used for cloud -
ready applications.
MODULE 1
Introduction to Web Development
Prerequisites
Programming Fundamentals
HTML/ HTML5, CSS/CSS3
JavaScript
AJAX (Asynchronous JavaScript and XML)
Reasonably good Database skills.
Module 2
HTML
Introduction to HTML
Opening and Closing Tags
HTML page structure
How to create HTML file?
Basic HTML Tags
Image tags and Attributes
Anchor tag, Email tag, tel tag
HTML lists
Ordered and Unordered lists
Creating website homepage using basic tags
Module 2
HTML
Table tagsin HTML
Table Attributes in HTML
Designing a calendar using HTML table
HTML Div tag
HTML From elements
HTML Input types
HTML Input Attributes
Video Lecture On YouTube
Module 3
CSS
Introduction to CSS
Types of CSS Types of CSS (external, internal, inline)
CSS selector (CSS selector (class, Id, tagName))
Using internal CSS
Basic CSS properties
Border properties
Creating professional webpage using HTML & CSS
CSS Spacing properties (Margin & Padding)
Margin properties
Padding properties
CSS measurement units
CSS box model browser
Background image property
External CSS
Border - radius property
How to comment HTML or CSS
Full - width vs fixed-width web design
Module 3
CSS
Setting width in percentage
CSS clear property
Creating full width Section
CSS hover
CSS transition property
CSS position (fixed, relative, sticky) properties
Absolute Positioning
CSS display property
CSS overflow properties
CSS z index properties
CSS opacity
CSS flexbox
CSS Grid
Module 3
CSS
Pseudo classes and elements
Display Properties
Connect of one page website
CSS #id selector
CSS cursor properties.
CSS scroll properties
Video Lecture On YouTube
PROJECTS
Create shaadi.com clone using HTML Tags
and CSS properties
Clone the homepage of Myntra, emphasizing
CSS flexbox property for layout design
Clone the homepage of Myntra, emphasizing
CSS flexbox property for layout design
Module 4
Javascript
Introduction to JavaScript
Uses of JavaScript
Ways to embed JS
Javascript variables
Scope and lifetime
Javascript and Data types
Javascript conditional statements
JavaScript loops
JavaScript arrays
Functions in JavaScript
Object in JavaScript
JavaScript DOM
Events in JavaScript
Windows object functions
Javascript Promises
JavaScript operators
Different types of patterns using nested loops
Javascript array methods
'for of' loop and 'for in' loop
Module 4
Javascript
Most useful functions in JS
Date object in JavaScript
Local storage in JS
JavaScript exception handling
Weather app using promise with free API
Mini e-commerce App using promise with free API
Data swipe using JavaScript DOM
Math operations
Show/Hide password using JS DOM
Changing image using this function
Product Cart system to increase /decrease quantity
Building random code generator
Creating JavaScript calculator
Creating responsive menu
Creating to-do list
Creating password generator
PROJECTS
Creating digital count down timer that
counts down to important date or event
Build movie search app using API to bring a
vast collection of movie data to users
PROJECTS
Build a weather app using API that brings
forecast details to users' fingertips
Design a tool like Google Translate to translate
text between different languages
PROJECTS
Javascript Projects Playlist
Module 5
Tailwind CSS
Introduction to Tailwind CSS
Setting up Tailwind CSS environment
Tailwind CSS Brakepoint and customization
Tailwind CSS Grid layout
Tailwind CSS Flexbox
Alignment in Tailwind CSS
Tailwind CSS Spacing, margin, and padding
Sizing in Tailwind CSS
Typography in Tailwind CSS
Backgrounds in Tailwind CSS
Tailwind CSS Shadow and opacity effects
Tailwind CSS Transforms
Tailwind CSS Animation
Creating website section using Tailwind CSS
Module 5
Video Lecture On YouTube
Project
Build a responsive clone of Netflix's homepage
using Tailwind CSS, replicating its iconic look
and feel
Module 6
React JS
Important JavaScript concepts for ReactJS
What is ReactJS?
Adding JS to a page and how React JS projects differ
Import and Export
Revising variables and values
Revising functions and parameters
Arrow functions
JavaScript Destructuring
Introduction to React JS
Uses and application of ReactJS
Key features of ReactJS
Benefits of using ReactJS
Installing create-react-app
Creating ReactJS projects
Flow and cycle of ReactJS
ReactJS components
List rendering in ReactJS
Bidirectional data Transfer in ReactJS
Creating to-do list app
Module 6
React JS
Form handling in ReactJS
React Component Life cycle
Fetch external API in ReactJS
Controlled components in ReactJS
React Route DOM
Introduction to Firebase
Installing Firebase
Adding & fetching data to Firebase Real time Database
Creating User Management feature using Firebase
Firebase Social login
Context API
Creating e-commerce Project
Redux Toolkit
Introduction to NextJS
NextJS folder structure
Discussing LMS website development projects
PROJECTS
Create a clone of Zomato homepage using
ReactJS
Creating Myntra's product listing page using
ReactJS and product API for sourcing items
PROJECTS
Create homepage clone of the grocery
shopping website BigBasket
Build a web based Quiz App where users can
take quizzes and see results
PROJECTS
Build LinkedIn homepage clone using React
and Firebase, enhance with infinite scrolling
Use React to Design LMS powered website
with Admin Panel
Use React to Design real estate platform with
complete Admin Panel
Module 7
NodeJS and ExpressJS
Introduction to Node.Js
Installing Node package manager
Javascript fundamentals in Node. Js
Creating Node Server
Package.json file
Nodemon Package
Simple and basic API
Getting input from command line
How Node js works?
Introduction to ExpressJS
Routing Params: Request and Response
Express JS Middleware
Route-level Middleware
Creating course module in Admin panel using
ReactJS and NodeJS
NodeJS and JWT token authentication
Connect Register API with ReactJS
Creating login/logout functionality in Admin panel
Using Relation objects in Admin panel
Module 7
NodeJS and ExpressJS
Payment gateway interaction in ReactJS using
NodeJS API
Creating Transaction listing module in Admin Panel
Display file list from folder
Asynchronous programming
Handling Asynchronous Data
Rendering HTML and JSON
Creating HTML Page
Removing extension from URL and 404 page
EJS template engine
Dynamic Page with Express JS
Creating video Module in Admin Panel using
ReactJS and NodeJS
Creating password forgot / reset functionality
Module 8
MongoDB
Introduction to MongoDB
Installing MongoDB
Basics of MongoDB
CRUD operations in MongoDB
Connecting MongoDB with NodeJS
Update and delete data in MongoDB
GET API in MongoDB
POST API for inserting data in MongoDB
PUT API to update data in MongoDB
Delete API to delete data in MongoDB
Mongoose with NodeJS
CRUD with Mongoose
Select Query Methods
Event and event Emitter
REPL
File Upload Using multer
Node mailer for Sending Emails
GET API with Mongoose
PUT API for Mongoose
DELETE API with Mongoose
Module 9
AWS Server Setup
Introduction to AWS
Creating EC2 instance
Security groups in AWS
How to deploy Project in AWS?
To see more
tech content
LEARN CODING
