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

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 a HTML page.
• Understanding HTML Elements.
• Creating and saving first web page.
• Defining the title on webpage.
• Showing the icon on webpage.
• Use of HTML Attributes. 
• Syntax to use attribute in HTML.
• Using background image.
• Defining marquee in HTML
• Empty HTML element.
• Creating horizontal line.

Text and link on web page

• Discussion on font formatting

sic layout

• 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 hyperlink
• Creating image on webpage.

• HTML Table data in different format.
• Discussion on different properties of table and its impact
• Formatting on table.
• Initial layout management of website using table.
• Discussion on div and span.

HTML Lists

• Creating list on web page to show the details of product.
• Creating different types of List.
• 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 on to server.
• Discussion on binary data posting

• Creating textbox, checkbox, radio button etc. control.
• Differentiation between checkbox, radio button and drop down list.
• Discussion on taking long text from user like feedback, address etc. 

Module 3 HTML5

HTML5 Basics

• Introduction of HTML5.
• Discussion on different version of HTML5.
• Document type declaration in HTML5.
• Comparing HTML5 with HTML.
• Creating different form controls introduce in HTML5.
• Discussion on different attribute introduce in HTML5.

Multimedia and graphics on webpage

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

Module 4 CSS

CSS Basics

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

• Selectors in CSS
  • Discussion on selector.
  • Different type of selector
    • Tag selector
    • Defining and using multi selector.
    • Defining and using class selector
    • Multiple classes on particular tag.
    • Defining and using id selector.
    • Defining and using universal selector.
    • Why universal selector.
    • Defining and using attribute selector.
    • Use and advantage of using pseudo-class.
    • Defining nested selector.
    • Discussion on Pseudo element
• Text formatting using CSS
  • Defining the color, size of text.
  • Discussion on different measurement unit.
  • 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 page.
  • Create transparent box.

• Table formatting using CSS
  • Defining the separate and collapse border.
  • Managing image in background.
  • Generate different structure of table.
  • Create table striped.

• Border formatting using CSS
  • Defining border width
  • Define the individual border width.
  • Defining different kind 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 an 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.
•  Defines the background.

• Creating and managing different kind of gradients.
• Creating shadow on text and box.

Module 6  Responsive design using Bootstrap

• Introduction of bootstrap
  • Introduction of bootstrap.
  • Discussion of responsive websites.
  • Discussion on different size of screen.
  • Difference between bootstrap4 and bootstrap5
  • Discussion on different container and its limitations.
  • Ways to use bootstrap.
  • Discussion on CDN over downloaded version.

• Layout management in bootstrap
  • Managing layout of web page 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 heading in bootstrap.
  • Generating lighter and secondary text in bootstrap.
  • Discussion on block quotes, description list, 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 also applying hover format.
  • Contextual classes on table.
  • Generating responsive web sites.

• 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 a different state 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 drop down.
  • Defining different section in drop down.

• Alert message in bootstrap
  • Generating different types of alert message.
  • Generating different types of alert message as link.
  • Generating different type of alert message with close button.
  • Generating different type of alert message 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 drop down 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 setting.
  • Creating 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 drop down 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 web page.
  • Showing colored spinner.
  • Creating growing spinner.
  • Defining the size of spinner.
  • Spinner with button.

• Module 7 Client Side Scripting with JavaScript

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

• Basic of java script
  • Identifiers in java script.
  • Variable and its scope.
  • What is keyword?
  • What do you mean by operator?
  • Explore typeof operator.
  • Discuss Let and const keyword.
  • Introduction of control flow statement.
  • What do you mean by selection constructs?
  • What do you mean by iteration constructs?

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

• Events in java script
  • What is event?
  • Different event and its uses in java script.

• Object in java script
  • What do you mean by object?
  • Advantages of using object.
  • Creating object in java script.
  • How bind properties and method in object.
  • Accessing member of object.
  • Use of this keyword in java script.
  • What do you mean by Date object?
  • Showing running time on the text box.

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

• Number in java script
  • What do you mean by number?
  • Discussion on number and floating point.
  • Description on precision of floating point numbers.
  • Difference between joining string and adding number. 
  • What do you mean by NaN and its type?
  • Mean by infinity.
  • Properties and methods of number.
  • Finding minimum value and maximum value.

• Array in java script
  • What do you mean by array?
  • Creating and accessing array element in java script.
  • Role of new keyword in java script.
  • Discuss array is object or both are different?
  • Array properties and method.
  • Adding and removing element in/from an array.
  • What do you mean by associative array?
  • Converting array into string.
  • Join two arrays.
  • Shifting array elements.
  • Slicing operation on an array.
  • Arranging array element in ascending or descending order.

• Type conversion in java script
  • What do you mean by type casting?
  • How many types of type casting in java script?
  • Discuss conversion in java script.

• Form control with JavaScript
  • Syntax to accessing form control in java script.
  • Showing full name after adding first name and second on text box. 
  • Demonstrate the events on drop down list.
  • Demonstrate the events on radio button.
  • Demonstrate the code to check status of radio button(checked/Unchecked)
  • Demonstrate the code to check status of checkbox(checked/Unchecked)
  • Accessing radio button in java script. Discuss the index of radio button.

• Module 8 DOM 
  • Introduction of DOM.
  • Discuss DOM over the java script.
  • Ways to access HTML element using DOM.
  • Accessing style using DOM.
  • Add event listener using DOM.
  • Add event handler to an element.
  • Remove event listener.
  • Create new HTML element using DOM.
  • Remove HTML element using DOM.
  • Discuss collection object.

• Module 9 Front end design using React JS

Overview

• Introduction of React.
• Discussion on SPA.
• Features of React JS
• Advantages of react
• Limitations of React

Environment setup

• Install global packages
• Add dependencies and plugin
• Run the server
• Create first react app.

Basic of React

• Discussion on local server.
• How does react work?
• Run the server
• Using HTML with react app.
• Discussion on ES6.

React JS Component

• Discussion on render function.
• Component API
• Brief Component life cycle
• What do you mean by State object?
• Demonstrate the ready state object.
• How to use ready state object?
• Changing the state object.
• What is Props?
• Passing data from one to another component.

React JS- Component life cycle

• Discussion of life cycle of components.
• Discuss mounting, unmounting and updating.
• Discussion on Life cycle methods
• Explanation on life cycle

React JS-Events

• What do you mean by event?
• Adding event and specifying event handler.
• Demonstrate example.
• Discuss the use of this keyword.
• Arrow function and bind method.
• Discussion on child events

React JS router

• Install a react router
• Create components
• Add a router

Component inter communication

• Component composition
• Pass data from parent to child
• Pass data from child to parent

React form handling

• Create and render user form with react
• Demonstrate the conditional rendering.
• Discussion on submitting the form.
• Demonstration on validate user input.
• Adding error messages.
• Adding CSS styles with the react app.

Module 10 Node JS

Introduction 

• Foundation
• Introduction to Node JS framework
• Installing node JS
• Using Node JS to execute scripts
• Discuss NPM
• The package.json configuration file
• Global Vs local package installation

Module in Node JS

• What do you mean by Module?
• Discussion on built-in module.
• Creating and using/including own module.
• Export specific attribute.

HTTP and URL module in Node JS

• Discussion on HTTP module in node.
• Discussion on node JS as server.
• Creating sever using http module.
• Discuss localhost and port no.
• Demonstration on adding http header.
• Discuss the query string and reading it in node.
• Discuss and demonstrate URL module.

Module 11 MongoDB

• Design Goals, architecture and installation
  • What is the need for Non-RDBMS?
  • Benefits of using Document based data bases
• Introduction to MongoDB
• History of MongoDB
• Features of MongoDB
• What do you mean by NoSQL Database?
• SQL vs NoSQL
• Advantages of NoSQL
• Discussion on MongoDB over RDBMS
• Advantages of using Mongo DB
• Discussion on Mongo Shell Basic Commands

Installation & Basic on Mongo DB

• Discussion on different Datatypes used in MongoDB 
• Installation of Mongo DB
• Demonstration on creating and using database 
• Removing database.
• Adding data in database

Collection & documents

• Discussion on Collection and documents
• Creating and removing collection
• Creating documents
• Removing documents
• Updating documents
• Finding documents 
• Query Operation
• Protection queries
• Limiting query result

Operations in MongoDb

• Why use Modules
• What do you mean by Sorting? 
• Discussion & demonstration on Indexing
• Demonstration on advance indexing
• Discussion on Replication
• advantage and disadvantage of replication
• How replication works?
• Need of replication
• Discussion on aggregation
• Discussion on sharding 
• Writing the first script

Export

• Discuss Export 
• Exporting data from Mongo Db collection to JSON 
• Exporting data from Mongo Db collection to CSV
• Creating data backup in Mongo DB
• Restore data in Mongo Db.

Module 12 Express Framework

• Express Overview 
• Installation of express.
• First example.
• Discussion on request and response.
• Discussion on basic routing.
  • setting up router 
  • Route parameter and queries
• Discussion on get and post method
• Scaffolding as MVC.
• Connecting to mongo database
• 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 reading POST data
• Adding middleware
• Data sources.

CRUD Operations  

• Understanding of CRUD operations
• Fundamentals usages of CRUD
• Read/write operations with CRUD