Full Stack Web Development Mastery

Welcome to the Full Stack Web Development repository! This repository contains course materials, code examples, and resources for the iCode Guru program on Full Stack Web Development.

Overview

This course is designed to provide a comprehensive learning path for individuals interested in becoming proficient in Full stack web application development. The curriculum covers front-end and back-end technologies, as well as essential tools and best practices in the industry.

Instructor

Husnain Akram

Zain Shakoor

Module-1: Web Designing

Pre-requisites: Basic Know How of Computer

Day 1 & 2 - HTML

• Basic structure (html, head, body).
• Common tags (headings, paragraphs, lists, images, links, forms).
• Semantic HTML (header, footer, section, article).
• Hands-on: Simple personal webpage.

Day 3 & 4 - CSS

• Selectors, colors, typography.
• Box model, display types.
• Flexbox & Grid.
• Responsive design (media queries).
• Hands-on: Style personal webpage into a responsive portfolio.

Day 5: Mini Project

• Project: Responsive Portfolio Website (HTML + CSS).

Module-2: JavaScript

Pre-requisite: Module 01

Day 1–2: JS Fundamentals

• Variables, data types, operators.
• Functions, conditions, loops.
• Arrays & objects.
• ES6+ (let/const, arrow functions, spread/rest, destructuring).

Day 3–4: DOM & Events

• DOM selection (getElementById, querySelector).
• Event listeners (click, input).
• Asynchronous JS (setTimeout, promises, async/await).
• Fetch API (consume public API).
• Hands-on: Build a weather app using a public weather API.

Day 5: Mini Project

• Project: Interactive To-do App or Weather App (HTML + CSS + JS).

Module 03: React.js (Frontend Framework)

Prereq: Module 01 & 02

Day 1–2: React Basics + React Router

• Create React project (Vite/CRA).
• JSX, components, props.
• Hooks: useState, useEffect.
• React Router (pages: home, about, login).
• Conditional rendering & loading states.

Day 3–4: State Management & Forms + API Calls

• Axios / fetch for API calls.
• Hands-on: Fetch posts from JSONPlaceholder API.
• Lifting state up.
• Context API for global state.
• Controlled components (forms).

Day 5: Mini Project

• Project: Blog Frontend (fetch posts, show details, add new post with form).

Module 04: Node.js + Libraries (Backend + Full Stack MERN)

Pre-requisite: Module 01 & 02 & 03

Day 1–2: Node.js + Express

• What is Node.js?
• npm & package.json + Express.js basics: routes, middleware.
• CRUD APIs with MongoDB.

Day 3–4: MongoDB + Libraries & Connecting React + Node

• MongoDB & Mongoose (schemas, models).
• Libraries:
  • bcrypt → password hashing.
  • jsonwebtoken (JWT) → authentication.
  • cors → enable frontend-backend communication.
• Axios requests from React to Express API.
• Protected routes in React.

Day 5: Final Capstone Project

• Full MERN Project (Deployed): Blog App / E-commerce Store
• Register/Login with JWT
• CRUD Posts/Products
• Protected routes
• Deployed on vercel (backend), Vercel/Netlify (frontend), MongoDB Atlas

Getting Started

1. Clone this repository:

   git clone https://github.com/zainbinshakoor/codebase.git