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