Full Stack Developer Training Course Curriculum

Module 1: Introduction to Web Development

Introduction to Web Development
Career Paths
Frontend Development Roadmap
Backend Development Roadmap
Why Full Stack Developer is quite popular career option?
Full Stack Options – MERN and MEAN
Introduction to UI - React and Angular
Introduction to NodeJS and MongoDB

Module 2: HTML Basics

Role Of HTML/CSS And JavaScript in Web Development
Setting up the Environment
My First Website
HTML Syntax
HTML Elements, Documents and Attributes
HTML Structure Coding Exercise
Customising VS-CODE
HTML Comments
HTML Tags – Heading, Div, List, Link, self-closing Tags
Image and Picture Tags
HTML Rules and Text Formatting Tags
HTML Structure

Module 3: HTML Advanced

Table Explained
Basic HTML Table Demo
Styling Basic HTML Table
Advanced HTML Table
Basic Styling: Advanced HTML Table
Basic HTML Form
Form Attributes
Form Input Types
Multiple And Single Select
HTML FieldSet
HTML DataList
HTML OptionGroups

Module 4: CSS Basics

What is CSS?
CSS Syntax
My first CSS code
CSS Developer tool
Reset Browser Default Style
HACK any website Style?
Types of CSS Part 1
Types of CSS Part 2

Module 5: CSS Advanced - Box Model, Colors & Selectors

What is Box Model?
Width & Height
CSS Borders
Padding and Margin Properties
CSS selector Explained
Element, Class, Id Selector
Descendant, Child Selector, Sibling Selectors
Pseudo Classes and Elements

Module 6: JavaScript Basics

What is Javascript?
How Javascript works
Why Javascript?
Variable Declaration
JavaScript Rules and Data Types
Arithmetic Operators
Decrement and Increment Operator
Assignment Operators
Single, double, triple equal to differences
Comparison & Logical Operators
If, Else If Statement
Loops – For and While
How to create a function
Function Argument vs function Parameters
Return keyword

Module 7: JavaScript Intermediate

String Concatenation
Template Literals
String Methods – Length, indexOf(), toUpperCase, toLowerCase()
How to create Array
Accessing Array Elements
Iterating over Array
Array Find, Reduce, filter Method
How to create an Object
Accessing, Updating & Deleting Object Properties
Object.Keys(), Object.Values() & Object.entries()

Module 8: JavaScript Advanced

What is Console.log() ?
Javascript Engine
Javascript Runtime (Browser)
Javascript Call Stack
Types of Scope
What is the DOM?
Types of DOM Selectors
Selecting DOM Elements Practice
Changing Element Properties
Adding and Removing Content
Types of DOM Events
Keyboard Event Types
Mouse Event Types
Form Event Types (Form Handling)

Module 9: React.js - Setup and Basics

Setting up environment
React JS: Requirement to learn react
React JS: How to create react app
React App Folder Structure
Starting and Stopping React app
Display Hello World
What is JSX?
How to create JSX
Nesting JSX
Expression vs statement
Embedding expression in JSX

Module 10: React.js - Props, Events, useState

CSS in react intro
Inline Styling
Using External CSS
Using images in react
Parent and a Child component
Props Explained
Types of events
Creating Event Handler
Passing arguments to event
What is useState?
Initialising State
Updating state handler
Decreasing & Resetting State
Stateless Component
Customising Stateless component
Stateful component

Module 11: React.js - Key Concepts

Render data using map
React key prop
React Fragment
What is a form?
Form initial State (USESTATE HOOK)
Handling onChange event
Submit form handler
Creating a form using computed value
What is HTTP Request?
HTTP Request using fetch
HTTP Request using Axios
Async Await with UseEffect

Module 12: React.js - Build front end of Custom App – Part I

Custom App Build Steps

Module 13: React.js - Build front end of Custom App – Part II

Custom App Build Steps

Module 14: Node.js – Basics & Setup

Web Application Components
Roles As a Backend Developer
Node JS Alternatives
Mastering The Terminal (Confusing Terms).
Mastering The Terminal | Common Commands
What is Node JS?
Why Node JS?
Uses Of Node JS
Companies Using Node JS
Installing Node JS
My First Node JS code

Module 14: Node.js – Core Modules, NPM, Web Server

What is a Module?
File System (fs): Create, Read, Rename a file etc.
Async/Await in Node JS
What is NPM?
Install & Use NPM Packages
How to Install NPM Package Globally
What is a Web Server?
Create HTML Files using fs Module
Response to GET Request
My First Node JS Server
Making Post Request
Examining HTTP Response

Module 15: Express.js – Server and Routing

Why Express JS?
Express JS Roadmap
Import and Export
Express Server
Express Routing: Routing Explained
Build all Routes (CRUD – Create, Read, Update & Delete) required by Custom App
Use Postman to test Routes

Module 16: Express.js – Middleware

Middleware Overview- TEXT ONLY
Express Middleware Overview
How Middleware Works
How To Create Middleware
Middleware Chaining
Protected Route Middleware
isAdmin Middleware
Third Party Middleware

Module 17: Expess.js – Serve Static Files & template engine (EJS)

Rendering Only Assets Final Project
How To Serve Assets
How To Make Post Request
What's Template Engine?
Setting EJS (Embedded Javascript)
EJS Syntax
Rendering Pages
EJS Partials & Rendering Dynamic Data

Module 18: Introduction to MongoDB and Setup

What is Database?
Types of Databases
What is MongoDB?
Understanding JSON Document
Why MongoDB?
Differences between Database vs Collection vs Documents
MongoDB Shell vs Drivers
How to Create MongoDB Account
How to Install MongoDB
How to Connect to MongoDB using Drivers
CRUD: Create, Fetch All, Querying, Updating & Deleting Documents

Module 19: Mongoose – Models and Schemas

Why Mongoose?
Mongoose Schema VS Mongoose Model
How To Connect to Mongoose
Schema And Schema Types Example
Mongoose Model
CRUD: Create, Fetch All, Querying, Updating & Deleting Documents

Module 20: Connecting the Backend to MongoDB

Custom App Build Steps

Module 21: Connecting the React.js Frontend to Backend

Custom App Build Steps

Module 22: Adding Authentication and Deploy Custom App

How Authentication works in a MERN App?
Hashing the User Password
Logging Users In (with Hashed Passwords)
Generating Tokens (JWT) on the Backend
More on JSON Web Tokens
Backend Route Protection with Auth Middleware
Using & Attaching JWT (Tokens) in React
Adding Authorization
Storing the Token in the Browser Storage
Adding Auto-Login (Basic Version)
Managing the Token Expiration Date
Finished Auto-Login & Auto-Logout
Creating a Custom Authentication Hook
Authentication - Summary

Module 23: Deploy Custom Application

How to deploy MERN Apps?
Deployment Steps Overview
Using Environment Variables (Node.js)
Environment Variables in React Apps
Preparing API Keys & Credentials
Building the React App
Adding Code Splitting to React
Understanding Possible Deployment Alternatives
Deploying a Standalone REST API (Example: Heroku)
Deploying a Standalone React SPA (Example: Firebase Hosting)
Module 24: Introduction to Angular & Setup
Introduction to Angular
Angular Vs React JS – When to choose what?
How to create Simple Angular app
Angular App Folder Structure
Display Hello World

Module 25: Angular - Basics

Expressions and Modules
Directives & Model
Data Binding & Controllers
Scopes, Filters, Services

Module 26: Angular Key Concepts

Http, Tables
Select, SQL
DOM, Events, Forms
Validation, API, Includes
Animations, Routing
Shopping List Application

Module 27: Resume Preparation, Interview and Job Assistance

Prepare Crisp Resume as Full Stack Developer
Discuss common interview questions in Full Stack
Explain students what jobs they should target and how