Course Name: Full Stack Web Developer (MongoDB , Express ,React and Node JS)

Advance

Overview:
● This training course help you to develop front-end and back-end, starting with the scratch to
developer level with the MERN Stack Web Development course.
● In this web development certification course, you will learn UI design using HTML, CSS,
Bootstrap and react.
● To work for dynamic web page with node JS & Express JS. We will discuss No SQL database.
This course is encapsulated with following key materials -
● Designing webpages with the help of HTML, CSS and React.
● Understanding the node environment and use of express.
● Understanding the No SQL database package.
● Deal with dynamic website with connecting.
● Understanding the MVC design pattern.
● Understanding asynchronous call to server.

Prerequisites:

● Basic knowledge of computers.

Target Audience:

● Anyone can opt this course beginner or working professional

● Students who want to work in leading MNC’s or any Top-Tier IT Companies like Infosys,
TCS, Microsoft, Samsung, Google, Amazon, Facebook, Wipro.
● M.Tech/B.Tech/MCA/BCA/Any Graduate or Diploma Holder

Key Learning Outcomes:

When you complete this Course Curriculum, you will be able to accomplish the following:

● Start the career as a Web Developer/Web Designer.

● Industry expert can enhance his/her skills to get better package.
● Come with new ideas in the industry/IT world.
● Expert in UI design.
● Course help to create responsive design.
● Able to create dynamic website.
● Meet the client requirement with MVC design pattern.
● Understanding the asynchronous transmission.
● Can work as freelancer.
Delivery Mode & Duration:

Classroom Training - 120 Hours (60 Hours Classroom sessions + 60 Hours of assignment)
Online Live Mode - 120 Hours (60 Hours Online Live sessions + 60 Hours of assignment)

Course 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
o Web client
o Web server
o Web browser
o Webpage
o 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
● 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 Tables and basic layout
● Showing data in tabular form.
● Creating tabular 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?
● Discussion on frameset and 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 on plug-in
● Discussion of object, embed element.
● Embedding YouTube videos.

Module 4 CSS

CSS Basics
o Introduction of CSS.
o Advantage of using CSS over the HTML.
o Properties and its value in CSS.
o Ways to use CSS.
o Why external CSS.
o Comment in CSS.
●
● Selectors in CSS
o Discussion on selector.
o 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
o Defining the color, size of text.
o Discussion on different measurement unit.
o Removing underline from hyperlink.
o Use of text transformation.
o Creating text shadow.

● Page formatting using CSS

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

● Table formatting using CSS

o Defining the separate and collapse border.
o Managing image in background.
o Generate different structure of table.
 o Create table striped.
●
● Border formatting using CSS
o Defining border width
o Define the individual border width.
o Defining different kind of border style
o Define the individual border style.
o Defining border color
o Define the individual border color.
o Defining the radius of border.
o
● List formatting
o Setting list style
o Showing image as an list
o Positioning list.
o Creating navigation bar.
o Generating different view of navigation bar.
● Cursor
o Setting different kind of mouse pointer.
o Defines the double headed arrow.
o Defining the four headed arrow.
●

Module 5 CSS3
● CSS3 formatting
o Create sections with rounded corner.
o Defines the image on border.
o Defines the background.
o Creating and managing different kind of gradients.
o Creating shadow on text and box.
o Defines skew, scale, move and rotate elements.

● Module 6 Responsive design using Bootstrap

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

● Layout management in bootstrap

o Managing layout of webpage using bootstrap.
o Differentiate container and container-fluid class.
o Creating and manipulating sections in container.
o Generating responsive text on webpage.

● Text in bootstrap
o Discussion on size of different heading in bootstrap.
 o Generating lighter and secondary text in bootstrap.
o Discussion on block quotes, description list, code snippets etc.
o Different text formatting in bootstrap.
o Generating contextual text color and background in bootstrap.
o Showing text on jumbotron.

● Table in bootstrap
o Showing records in tabular format with basic styling.
o Showing striped style on bootstrap table.
o Showing bordered table and also apply hover format.
o Contextual classes on table.
o Generating responsive web site.

● Icons in bootstrap
o Discussion on glyphicon.
o Use of glyphicon over normal text.
o Limitation of glyphicon.
o Showing icons on form controls like user, lock etc.

● Modal in bootstrap
o Understanding modal.
o Create and open modal.
o Different classes used for modal.
o Defining the size of modal.
o Showing login and registration page on modal.

● Image in bootstrap
o Creating responsive image.
o Defining the rounded image.
o Creating circle image.
o Creating thumbnail image.
o Image with caption.
o Creating responsive video with scale to parent element.
o Image with media class.
o Defining alignment of media object.
o Showing nested media object.

● Button in bootstrap
o Generate different style of button.
o Generate different size of button in bootstrap.
o Mean of large button, small button and block level button.
o Using different state of button in bootstrap.

● Button group in bootstrap

o Creating horizontal button group.
o Horizontal button group with different sizes.
o Creating vertical button group.
o Defining justified button group.
o Nesting button and creating drop down.
o Defining different section in drop down.
● Alert message in bootstrap
o Generating different types of alert message.
o Generating different types of alert message as link.
o Generating different type of alert message with close button.
o Generating different type of alert message with animation.

● Badges in bootstrap
o What do you mean by badges?
o Generating different types of badges.
o Badges with contextual classes.

● Panel and collapsible panel in bootstrap

o What do you mean by panel?
o Panel with heading.
o Panel with footer.
o Create panel group.
o Panel with contextual class.
o Create basic collapsible.
o Create collapsible panel.
o
● Menu and navigation bar in bootstrap
o Creating menu as tab and pills.
o Differentiating tab and pills.
o Creating tabs as drop down menu.
o Showing horizontal and vertical pills.
o Creating pills with drop down menu.
o Showing centered tabs and pills.
o Creating toggleable tabs.
o Creating dynamic tabs.
o Creating toggleable pills.
o Creating dynamic pills.
o Creating navigation bar.
o Defining inverted navigation bar.
o Designing navigation bar with drop down menu.
o Aligning menus in navigation bar.
o Creating fixed navigation bar.
o Create collapsing navigation bar in bootstrap.

● Form in bootstrap
o Creating form.
o Discussion on form control default setting.
o Creating form with different layout.
o Discussion on default layout of form.
o Creating text box in bootstrap.
o Taking long string in text area.
o Checkbox and radio button in bootstrap.
o Creating drop down list.
o Grouping input control on form.
o Creating static control on form.
o Using state of control on form.
o Showing text box in different size.
o Showing help text with form controls.
 o Carousel in bootstrap
o What do you mean by carousel?
o Creating carousel.
o Discussion of different carousel classes.
o Defining carousel with caption.
o
o Spinner in bootstrap
o What is spinner?
o Creating and showing spinner on web page.
o Showing colored spinner.
o Creating growing spinner.
o Defining the size of spinner.
o Spinner with button.
o
● Module 7 Client Side Scripting with JavaScript

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

● Basic of java script

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

● Function in java script

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

● Events in java script

o What is event?
o Different event and its uses in java script.
o Demonstrating click event in java script.
 o Demonstrating double click event in java script.
o Demonstrate the code of java script to change image using mouse over and out event.
o Demonstrating change event on drop down list in java script.

● Object in java script

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

● String in java script

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

● Number in java script

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

● Array in java script

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

● Form control with JavaScript

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

● Module 8 DOM
o Introduction of DOM.
o Discuss DOM over the java script.
o Ways to access HTML element using DOM.
o Accessing style using DOM.
o Add event listener using DOM.
o Add event handler to an element.
o Remove event listener.
o Create new HTML element using DOM.
o Remove HTML element using DOM.
o 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.
● Discussion on props in constructor.
● Discuss the term Mixing.
● What do you mean by JSX?

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

o What is the need for Non-RDBMS?
o 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.
o setting up router
o Route parameter and queries
 ● Discussion on get and post method
● Express Cookies management
● 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 handlebars
● Using REST reading POST data
● Adding middleware
● Data sources.
CRUD Operations
● Understanding of CRUD operations
● Fundamentals usages of CRUD
● Read/write operations with CRUD