MERN Stack Development Course Content

FULL-STACK WEB DEVELOPMENT

About this course

This course will serve as a comprehensive introduction to various topics in SoftwareDevelopment. This course is a proper blend of theory and the practical hands onsession for each and every concept. Throughout the course participants will work on acomplete end to end tech stack in order to implement the concepts learned during the course.

Program Highlights

• • •             240+ Hours of Live Lectures
    •             150+ Hours of Live Handson Sessions
    •             100+ Hours of Assignment and Projects
    •             5+ Mini Projects
    •             3+ Major Projects
    •             1 Capstone Project

Learning Outcomes

At the end of the course participants should be able to:

• • •             Build an extensive backend API.
    •             Protecting routes/endpoints with JWT (JSON Web Tokens)
    •             Extensive API testing with Postman.
    •             Integrating React with our backend in an elegant way, creating a great workflow.
    •             Building our frontend using React to work with backend API’s
    •             Creating the build scripts and securing the keys before deployment
    •             Deploying all project on live server to get live project links

Prerequisites

There are no prerequisites required for the course. But a little knowledge ofprogramming and HTML, CSS and JavaScript is a benefit for the candidate.

Program Overview: (Road Map)

Course Syllabus

Introduction:

• • • •             Download and install Visual Studio Code (VS Code)
      •             Overview of Full Stack Development Program

Module – 1 (Front End Development)

HTML :

• • • •       HTML intro basic
      •       Tags and Elements
      •       Headings
      •       Paragraphs
      •       Block and inline elements
      •       Tag Attributes
      •       Lists and Tables
      •       Forms
      •       Buttons

CSS:

• • • •       Color (all 3 methods)
      •       CSS Selectors
      •       Colors in CSS
      •       CSS Box Model
      •       Margin and Padding Shorthand, and Borders
      •       Text Formatting Styles
      •       Alignment and Floating
      •       Positioning in CSS
      •       Setting Images As Element Background & other property
      •       Pseudo Classes
      •       Flex box, Grids and Positions
      •       CSS Animations
      •       CSS Transformation

Bootstrap:

• •       Introduction
  •       Layout - Breakpoints, Container, Grid, column, rows
  •       Content - typography, images, table
  •       Forms - overview, form control, select, check & radios, validations
  •       Components - Buttons, Card, Carousel, Dropdown, Navbar, Pagination, popover, progress
  •       Utilities – Background, border, colors, display, flex, position, sizing

JavaScript:

• • •       Fundamentals - variables, data types, type conversions, basic operators,       comparisons, logical
    •       operators
    •       Loops - while, for, do while
    •       Conditional statement, switch
    •       Arrays and pop(), push(), shift(), unshift()
    •       Functions & function expressions & first class function
    •       Object

ES6

• • •             Let, const
    •             Arrow functions
    •             Array methods - forEach(), map(), reduce(), filter(), slice(), splice()
    •             Destructuring Object and Array
    •             Spread Operator vs Rest Operator
    •             Template literals
    •             for/in and for/of loop
    •             Promises, async/await
    •             setTimeout(), setInterval()
    •             JavaScript classes & OOPs
    •             Javascript - Excecution context
    •             Call stack
    •             Hoisting
    •             window & this keyword
    •             scope chain, lexical environment
    •             Temporial dead join
    •             Block scope & shadowing
    •             Closure
    •             Event loops

DOM

• • • •             Finding HTML elements - getElementById(), getElementByClassName(),
      •             getElementsByTagName(), querySelector(), querySelectorAll()
      •             Changing HTML elements
      •             Adding and Delete elements
      •             DOM events - onclick(), onchange(), onsubmit(), onload()

Making API call

• • • •             1- Using fetch()
      •             2 - Using axios()

AJAX

• • • •       Ajax intro, How AJAX works ?
      •       XMLHttpRequest
      •       AJAX request/response
      •       API with AJAX

jQuery

• • • •       Selectors
      •       Methods
      •       Events - click, submit, change, select, focus, load..
      •       Effects - hide, show, toggle, delay....
      •  
      •       Traversing