Full Stack Web Development with MERN Stack (MongoDB, Express, React, Node.js)

Curriculum

Module 1: Frontend Fundamentals

Introduction

• What is Server? Discuss LAMP/WAMP/XAMP
• Difference between global server and local server?
• Configuration of local server.
• Role of HTTP over the network/Internet.
• Terminologies:
  • Web client
  • Web server
  • Web browser
  • Webpage
  • Website
• Discuss Client-server architecture.

Module 2: Introduction to HTML

HTML Basics

• Understand the structure of an HTML page.
• Understanding HTML Elements.
• Creating and saving the first web page.
• Defining the title on the webpage.
• Showing the icon on the webpage.
• Use of HTML Attributes.
• Syntax to use attribute in HTML.
• Using a background image.
• Defining marquee in HTML.
• Empty HTML element.
• Creating horizontal line.

Text and link on webpage

• Discussion on font formatting.
• Showing data in tabular form.
• Creating Headings in HTML.
• Creating and styling Paragraphs.
• Using different color coding.
• Comments in HTML.
• Linking webpages using hyperlink.
• Creating different types of hyperlinks.
• Creating image on webpage.
• HTML Table data in different formats.
• Discussion on different properties of the table and its impact.
• Formatting on the table.
• Initial layout management of the website using the table.
• Discussion on div and span.

HTML Lists

• Creating list on the webpage to show the details of the product.
• Creating different types of Lists.
• Properties of numbered list.
• Properties of bulleted list.
• Creating HTML description Lists.

HTML Image Maps

• The Image
• The Map
• The Areas

HTML iframe

• What is the use of Iframe?
• Setting height and width of iframe.
• Removing the Border from iframe.

HTML Entities

• HTML Symbols
• HTML Encoding (Character Sets)

HTML Forms

• Discussion on form.
• Attribute related to form.
• Method of posting form onto the server.
• Discussion on binary data posting.
• Creating textbox, checkbox, radio button, etc., control.
• Differentiation between checkbox, radio button, and dropdown list.
• Discussion on taking long text from user like feedback, address, etc.

Module 3: HTML5

HTML5 Basics

• Introduction to HTML5.
• Discussion on different versions of HTML5.
• Document type declaration in HTML5.
• Comparing HTML5 with HTML.
• Creating different form controls introduced in HTML5.
• Discussion on different attributes introduced in HTML5.

Multimedia and Graphics on the Webpage

• Creating an audio control on the webpage.
• Creating video control on the webpage.
• Discussion of object, embed elements.
• Embedding YouTube videos.

Module 4: CSS

CSS Basics

• Introduction to CSS.
• Advantage of using CSS over HTML.
• Properties and its value in CSS.
• Ways to use CSS.
• Why external CSS.
• Comments in CSS.

Selectors in CSS

• Discussion on selectors.
• Different types of selectors:
  • Tag selector.
  • Defining and using multi-selectors.
  • Defining and using class selectors.
  • Multiple classes on a particular tag.
  • Defining and using ID selectors.
  • Defining and using universal selectors.
  • Why universal selector.
  • Defining and using attribute selectors.
  • Use and advantage of using pseudo-class.
  • Defining nested selectors.
  • Discussion on Pseudo element.

Text Formatting using CSS

• Defining the color, size of text.
• Discussion on different measurement units.
• Removing underline from hyperlink.
• Use of text transformation.
• Creating text shadow.

Page Formatting using CSS

• Defining the background.
• Managing image in background.
• Managing layout of page using position.
• Differentiate absolute, relative, and fixed layout.
• Defining margin and padding.
• Setting individual margin and padding on the page.
• Create transparent box.

Table Formatting using CSS

• Defining the separate and collapse border.
• Managing image in background.
• Generating different structures of table.
• Create striped tables.

Border Formatting using CSS

• Defining border width.
• Define the individual border width.
• Defining different kinds of border style.
• Define the individual border style.
• Defining border color.
• Define the individual border color.
• Defining the radius of a border.

List Formatting

• Setting list style.
• Showing image as a list.
• Positioning list.
• Creating a navigation bar.

Cursor

• Setting different kinds of mouse pointers.

Module 5: CSS3

CSS3 Formatting

• Create sections with rounded corners.
• Defines skew, scale, move, and rotate elements.
• Defines the image on border.
• Creating and managing different kinds of gradients.
• Creating shadow on text and box.

Module 6: Responsive Design using Bootstrap

Introduction to Bootstrap

• Introduction to Bootstrap.
• Discussion of responsive websites.
• Discussion on different sizes of screens.
• Difference between Bootstrap 4 and Bootstrap 5.
• Discussion on different containers and their limitations.
• Ways to use Bootstrap.
• Discussion on CDN over downloaded version.

Layout Management in Bootstrap

• Managing layout of the webpage using Bootstrap.
• Differentiate container and container-fluid class.
• Creating and manipulating sections in containers.
• Generating responsive text on a webpage.

Text in Bootstrap

• Discussion on size of different headings in Bootstrap.
• Generating lighter and secondary text in Bootstrap.
• Discussion on block quotes, description lists, code snippets, etc.
• Different text formatting in Bootstrap.
• Generating contextual text color and background in Bootstrap.
• Showing text on jumbotron.

Table in Bootstrap

• Showing records in tabular format with basic styling.
• Showing striped style on Bootstrap table.
• Showing a bordered table and applying hover format.
• Contextual classes on table.
• Generating responsive websites.

Icons in Bootstrap

• Discussion on glyphicon.
• Use of glyphicon over normal text.
• Limitation of glyphicon.
• Showing icons on form controls like user, lock, etc.

Modal in Bootstrap

• Understanding modal.
• Create and open modal.
• Different classes used for modal.
• Defining the size of modal.
• Showing login and registration page on modal.

Image in Bootstrap

• Creating responsive image.
• Defining the rounded image.
• Creating circle image.
• Creating thumbnail image.
• Image with caption.
• Creating responsive video with scale to parent element.
• Image with media class.

Button in Bootstrap

• Generate different styles of button.
• Generate different sizes of button in Bootstrap.
• Mean of large button, small button, and block-level button.
• Using different states of the button in Bootstrap.

Button Group in Bootstrap

• Creating horizontal button group.
• Horizontal button group with different sizes.
• Creating vertical button group.
• Defining justified button group.
• Nesting button and creating dropdown.
• Defining different sections in dropdown.

Alert Message in Bootstrap

• Generating different types of alert messages.
• Generating different types of alert messages as a link.
• Generating different types of alert messages with a close button.
• Generating different types of alert messages with animation.

Badges in Bootstrap

• What do you mean by badges?
• Generating different types of badges.
• Badges with contextual classes.

Panel and Collapsible Panel in Bootstrap

• What do you mean by panel?
• Panel with heading.
• Panel with footer.
• Create panel group.
• Panel with contextual class.
• Create basic collapsible.
• Create collapsible panel.

Menu and Navigation Bar in Bootstrap

• Creating navigation bar.
• Defining inverted navigation bar.
• Designing navigation bar with dropdown menu.
• Aligning menus in navigation bar.
• Creating fixed navigation bar.
• Create collapsing navigation bar in Bootstrap.

Form in Bootstrap

• Creating form.
• Discussion on form control default settings.
• Creating a form with different layout.
• Discussion on default layout of form.
• Creating text box in Bootstrap.
• Taking long string in text area.
• Checkbox and radio button in Bootstrap.
• Creating dropdown list.
• Grouping input control on form.
• Creating static control on form.
• Using state of control on form.
• Showing text box in different size.
• Showing help text with form controls.

Carousel in Bootstrap

• What do you mean by carousel?
• Creating carousel.
• Discussion of different carousel classes.
• Defining carousel with caption.

Spinner in Bootstrap

• What is spinner?
• Creating and showing spinner on webpage.
• Showing colored spinner.
• Creating growing spinner.
• Defining the size of spinner.
• Spinner with button.

Module 7: Client-Side Scripting with JavaScript

• Introduction to JavaScript.
• What do you mean by scripting language?
• Differentiate client-side scripting and server-side scripting.
• Introduction to JavaScript.
• How to use JavaScript?
• First “Hello World” in JavaScript.
• Discussion on syntax of JavaScript.
• Advantage of loosely typed languages over strongly typed ones.

Basics of JavaScript

• Identifiers in JavaScript.
• Variable and its scope.
• What is a keyword?
• What do you mean by operator?
• Explore typeof operator.
• Discuss Let and const keywords.
• Introduction to control flow statements.
• What do you mean by selection constructs?
• What do you mean by iteration constructs?

Function in JavaScript

• What do you mean by function?
• Advantages of using functions.
• Types of functions in JavaScript.
• Creating user-defined functions.
• Ways to create user-defined functions.
• Local and global scope of variable.
• What do you mean by strict mode?
• Discussion on built-in functions.
• Anonymous functions in JavaScript.
• Discuss array functions.

Events in JavaScript

• What is event?
• Different events and their uses in JavaScript.

Object in JavaScript

• What do you mean by object?
• Advantages of using objects.
• Creating objects in JavaScript.
• How to bind properties and methods in an object.
• Accessing members of an object.
• Use of the “this” keyword in JavaScript.
• What do you mean by Date object?
• Showing running time on the text box.

String in JavaScript

• What do you mean by string?
• Finding the length of a string.
• Finding substring from a given string.
• Searching string from a given string.
• Extracting string in different ways.
• Extracting domain from web address.
• Replacing string in a given string.
• Converting string in lower and upper case.
• Joining two strings in JavaScript.
• Removing extra spaces from a string.
• Extracting character from a given string.
• Conversion from string to array.

Number in JavaScript

• What do you mean by number?
• Discussion on number and floating point.
• Description on precision of floating point numbers.
• Difference between joining strings and adding numbers.
• What do you mean by NaN and its type

Module 8: DOM

• Introduction to DOM
  • Discuss DOM over JavaScript.
  • Ways to access HTML elements using DOM.
  • Accessing style using DOM.
  • Add event listener using DOM.
  • Add event handler to an element.
  • Remove event listener.
  • Create new HTML elements using DOM.
  • Remove HTML elements using DOM.
  • Discuss collection objects.

Module 9: Front-End Design Using React JS

• Overview
  • Introduction to React.
  • Discussion on SPA (Single Page Application).
  • Features of React JS.
  • Advantages of React.
  • Limitations of React.
• Environment Setup
  • Install global packages.
  • Add dependencies and plugins.
  • Run the server.
  • Create the first React app.
• Basics of React
  • Discussion on the local server.
  • How React works.
  • Running the server.
  • Using HTML with React app.
  • Discussion on ES6.
• React JS Components
  • Discussion on the render function.
  • Component API.
  • Brief component lifecycle.
  • What is the State object?
  • Demonstrating the ready state object.
  • How to use the ready state object?
  • Changing the state object.
  • What are Props?
  • Passing data from one component to another.
• React JS Component Lifecycle
  • Discussion of the lifecycle of components.
  • Discuss mounting, unmounting, and updating.
  • Life cycle methods and explanations.
• React JS Events
  • What is an event?
  • Adding events and specifying event handlers.
  • Demonstrate examples.
  • Discuss the use of the this keyword.
  • Arrow function and bind method.
  • Discussion on child events.
• React JS Router
  • Install React Router.
  • Create components.
  • Add a router.
• Component Inter-Communication
  • Component composition.
  • Passing data from parent to child.
  • Passing data from child to parent.
• React Form Handling
  • Create and render user forms with React.
  • Demonstrate conditional rendering.
  • Discussion on submitting the form.
  • Demonstration on validating user input.
  • Adding error messages.
  • Adding CSS styles with the React app.

Module 10: Node JS

• Introduction
  • Foundation of Node JS.
  • Introduction to the Node JS framework.
  • Installing Node JS.
  • Using Node JS to execute scripts.
  • Discuss NPM.
  • The package.json configuration file.
  • Global vs local package installation.
• Modules in Node JS
  • What is a module?
  • Discussion on built-in modules.
  • Creating and using your own module.
  • Exporting specific attributes.
• HTTP and URL Module in Node JS
  • Discussion on the HTTP module in Node.
  • Node JS as a server.
  • Creating a server using the HTTP module.
  • Discuss localhost and port numbers.
  • Demonstration on adding HTTP headers.
  • Discuss and demonstrate the URL module.

Module 11: MongoDB

• Design Goals, Architecture, and Installation
  • What is the need for Non-RDBMS?
  • Benefits of using document-based databases.
  • Introduction to MongoDB.
  • History and features of MongoDB.
  • What do you mean by NoSQL databases?
  • SQL vs NoSQL.
  • Advantages of NoSQL.
  • MongoDB vs RDBMS.
  • Advantages of using MongoDB.
  • Discussion on Mongo Shell basic commands.
• Installation and Basics of MongoDB
  • Discussion on different data types used in MongoDB.
  • Installation of MongoDB.
  • Demonstration on creating and using databases.
  • Removing databases.
  • Adding data to databases.
• Collections and Documents
  • Discussion on collections and documents.
  • Creating and removing collections.
  • Creating and removing documents.
  • Updating documents.
  • Finding documents.
  • Query operations.
  • Limiting query results.
• Operations in MongoDB
  • Why use modules?
  • Discussion on sorting.
  • Demonstration on indexing.
  • Advanced indexing.
  • Discussion on replication.
  • Advantages and disadvantages of replication.
  • How replication works.
  • Need for replication.
  • Discussion on aggregation.
  • Discussion on sharding.
  • Writing the first script.
• Exporting Data
  • Discuss exporting data from MongoDB collections to JSON.
  • Exporting data from MongoDB collections to CSV.
  • Creating data backups in MongoDB.
  • Restoring data in MongoDB.

Module 12: Express Framework

• • Express Overview
  • Installation of Express.
  • First example.
  • Discussion on request and response.
  • Basic routing.
  • Setting up the router.
  • Route parameters and queries.
  • Discussion on GET and POST methods.
  • Scaffolding as MVC.
  • Connecting to MongoDB.
  • Performing CRUD operations.
  • Handling form data.
  • Handling query parameters.
  • Error handling.
  • Using templates.
  • The MVC pattern.
  • Building a front-end controller.
  • Defining routes.
  • Creating actions.
  • Configuring Express to use EJS.
  • Using REST to read POST data.
  • Adding middleware.
  • Data Sources
• CRUD Operations
  • Understanding CRUD operations.
  • Fundamentals of CRUD.
  • Read/write operations with CRUD.

Module 13: Final Project

• Full-stack MERN Web Application
  • Build a full-stack MERN web application.
  • Apply React for the frontend and Node.js/Express for the backend.
  • Integrate MongoDB for data storage.
  • Implement MVC architecture and asynchronous data flow.