MERN COURSE SYLLABUS

(MongoDB,ExpessJs,ReactJs,NodeJs)
HTML-5
TITLE DISCRIPTION
Introduction to web The fundamentals elements of web page structure and
programming basic concept
Introduction to Html History , Doctype , Structure of Html page, Element ,Tags,
Headings & paragraphs
Html Formatting Formatting of text using various elements.
Html div span It maintains the flow of content in Html page
Attribute and Attributes and comments importance
comment
Color Adding colors to text and background
Images Embed Images in webpage
Class and id Importance of use of class and id
Html Lists Different Types of list and their significance
Hyperlink Create link and go to next page
Html Tables Arrange data in tabular form in web page
Block & inline Difference between block and inline elements
IFrames Embed one page into another
Audio & video Inserting Video and audio into webpage
Html forms Integrating forms into webpage and use of various form
element
Html head Html headers and use of Meta tags

Assignment :

1. Create a HTML form with 3 or more fields.

2. Create Table with row span and col span.

3. Create order list and unorder list.

 CSS
TITLE DISCRIPTION
Css Introduction Importance of Css ,methods to add in Html document &
Syntax
Selectors Selectors types and applying it on Html elements
Css Color Apply color to background and text
Opacity & Gradient Making elements transparent and use of gradient
Backgrounds Styling in various ways of applying background and its
different properties
Border & Margin Use of Borders and margin in positioning element on a
web page
Text Fonts Use of font family and manipulating text accordingly
Google fonts Google font cdn used to style text in webpage
Padding Importance and uses of width , height and padding used
/Height/Width on elements
Css box model Box model uses to set padding ,margin ,border
Flex Flexbox to define the layout of elements on webpage
Position/Float Absolute and Relative position of element/use of float
property
Overflow Overflow property to work with text
Inline-block Converting of inline element to Block and vice-versa
Media Query Media Query used to create responsive website
!important !important property used to override other properties
Psedo-Class & Psedo- Use of psedo-class and psedo-elements
Elements
Css generators Introduction to Css Generators for applying various styles
and animaton to website

Assignment :

1.Create a google search page .

2.Create a Blog page.

 Bootstrap-5
TITLE DISCRIPTION
Introduction to Introduction of bootstrap framework and connectivity of
Bootstrap-5 bootstrap in page ,Syntax
Container and Use of container fluid and container difference
container Fluid
Bootstrap Grid Use of Bootstrap Grids to make pages responsive .Nested
grids. And Various breakpoints
Bootstrap Component Jumbotron ,
Button ,
table
Modal
Alert,
Carousal, Cards
Images,
Toast
Badge ,Modals ,Popover
Bootstrap Utilities Borders
Colors
Spacing
Flexbox
Typograpy
Overflow
Display
Forms Form control
Floating Labels
Input Group

Assignment :

Create a website with multiple pages Eg. Home page, About page , Contact page

Insert Navbar , Carousal, Cards ,Images etc

Insert Google Map to show location

 JAVASCRIPT
TITLE DISCRIPTION
Introduction to Evolution of Javascript , Features ,Advantages.
Javascript Editors used for javascript
Adding Javascript in Html
Hoisting
Javascript Data types Datatypes in javascript
and variables Javascript Keywords and their uses
Types of variables and difference between Var , let and
Const ,
Template Literals (ES6)
Javascript Operators What are operators?
Arithmetic Operator
Comparison Operators
Logical Operators
Ternary Operators
Javascript Statement Conditional statement (if, if else ,switch statement)
Loop statement(while loop , forloop ,do while loop
,break and continue, Nested loop, For in ,For of)
Javascript Function What is function? Why to use? How to call function
using arguments .
Passing parameters
Function return
Anonymous function
Arrow Function
Local variable global variable,
Scope
Built in methods
Javascript array What is array ,uses, Properties ,methods(built-in
function of array)
Javascript object What is object and its properties, creating of object,
Use of this keyword in object,
(...)spread operator, built-in methods
Methods of creating object
Javascript Class Creating class, use of this keyword ,Difference
between class and object
Import and Export Import and export in javascript
Regular Expression Search patterns ,String methods ,quantifiers
Events in javascript What is events, its uses Adding Event Handler
Javascript async Synchnorous javascript ,Callback ,callback hell,
Promises ,promise hell, async await
Document object model Intro to Dom tree ,method to access elements,
Adding event listeners and manipulating Dom
elements,
Use of get set
Json Placeholder api Introduction to Json Placeholder
Use of Fake REST api ,Fetching data using Axios
Storage Local and session storage

Logic building Questions are also included.

Assignment :

Create a form with various fields and submit data to server.

Crud operation to be performed using Fake api (json placeholder)

Eg.Todo , Color game , KBC , Login And Register, etc

 REACT JS
TITLE DISCRIPTION
Introduction to REACT What is React ? Concept of Virtual Dom
History.
Installation of Nodejs. Setting up environment
Create First React app
Introduction of ES6 Use of ES6 features in react eg.Ternary operator,
Spread Operator, Arrow function
Overview of JSX Difference between JSX and JS, creating Components
Props Use of props for passing data from one component to
another
Events Adding events handlers to JSX elements
List and Forms Method to display list on webpage and working with
forms
React Routers Installing Router dom to move from one page to
another
React CSS style Various ways to add styles to component
React Hooks What is hook ,History ,difference from class
componenets
React hooks Introduction to React hooks
How hooks are different from Class components
Types of hooks Usestate
Useeffect
Useref
Usecontext
Usereducer
Usecallback
Usememo
Usenavigate
Useparams
Custom hook
High order component
Formik forms Formik Library to be used for handling forms
 Assignment :

Create a react app and create a component of form with various fields and submit
data to Json server

Crud operation to be perfomed using Fake api (json placeholder)

Node Js
Introduction to What is Node js ,Advantages
NodeJs Installation and setup
MVC Introduction to mvc architecture
Introduction to Function of modules and Types
modules
Webserver Creating web server ,sending Request
File System Read, write, Delete, Open file using node js
Events Event emmiters
Introduction to Express js framework of nodejs .Installing express in nodejs and
expesss js creating server ,Routers ,Controllers
Insomnia A tool for for testing api
Creating api Testing Api through insomnia
Crud operation
Introduction to Connection of Node js with mongo db using (mongoose) ODM
MongoDb

Introduction to Use Cross-origin resource sharing & its imporatance

cors

Assignment
Ceating api of crud operation and sending data to database using mongoose.

MONGO DB
Introduction to Nosql is Mongodb.
MongoDB Installation of Mongodb and MongoDBcompass
What is BSON?
Create database Commands to create database
Create collection To create collection(tables) in database
Insert To insert data into collection
Find To find data in collection
Delete To delete data from collection
Query Operators Query operators to compare values
$eq ,$gt , $lt ,$ne
Update operators $set, $unset
Nested Document What is nested document ?How to create nested
document and perform the above operations
Upsert Update or insert document
Indexing Creating index on fields and its importance
Aggregation Aggregation operation allows to group ,sort ,perform
calculation and importance of pipelines
Sharding and What is sharding its uses and replication and its uses
replication And their importance.
Schema

PROJECT
Create React App of blogs with crud operation using Nodejs backend to
create api with expressjs and using Mongoose ODM (library for
mongodb) for database .

Use of json web token, Bcrypt for password.

Mongoose models provide several static helper function for CRUD
operation.

 Model.deleteMany()
 Model.deleteOne()
 Model.find()
 Model.findById()
 Model.findByIdAndDelete()
 Model.findByIdAndRemove()
 Model.findByIdAndUpdate()
 Model.findOne()
 Model.findOneAndDelete()
 Model.findOneAndRemove()
 Model.findOneAndReplace()
 Model.findOneAndUpdate()
 Model.replaceOne()
 Model.updateMany()
 Model.updateOne()
 Next.js
Introduction Introduction to Next.js .Installation of Next js
SSR Introduction to Server side render
Build Application Importance of Routing ,Rendering,datafetching