Module 1: Web Fundamentals (HTML & CSS Basics)

• Introduction to Web Development (Frontend vs Backend)

• HTML Basics: Elements, Tags, Attributes

• Forms, Tables, Semantic HTML

• CSS Basics: Selectors, Colors, Fonts, Box Model

• Layouts with Flexbox & Grid

• Responsive Design Fundamentals

• Mini Project: Personal Portfolio Page

---

🔹 Module 2: Bootstrap – Responsive Framework

• Introduction to Bootstrap

• Grid System & Responsive Utilities

• Components (Navbar, Cards, Buttons, Modals)

• Forms & Validation in Bootstrap

• Customization with Sass/Variables

• Mini Project: Responsive Business Website

---

🔹 Module 3: JavaScript – Programming for Web

• JavaScript Basics (Variables, Data Types, Operators)

• Functions, Arrays, Objects

• DOM Manipulation & Events

• ES6+ Features (let/const, arrow functions, template literals)

• Fetch API & JSON

• Local Storage & Session Storage

• Mini Project: To-Do List App

---

🔹 Module 4: React.js – Modern Frontend Development

• Introduction to React & SPA Concept

• JSX & Components

• Props & State

• Event Handling & Forms

• useEffect & useState Hooks

• React Router for Navigation

• Fetching Data in React (API Integration)

• Mini Project: Weather App / Movie Search App

---

🔹 Module 5: TypeScript – Strongly Typed JavaScript

• Why TypeScript? Advantages over JS

• Basic Types & Interfaces

• Functions & Generics

• Classes & OOP in TypeScript

• TypeScript with React

• Mini Project: Type-Safe Task Manager

---

🔹 Module 6: Angular – Enterprise Frontend Framework

• Introduction to Angular & Setup

• Components, Templates, and Data Binding

• Directives & Pipes

• Services & Dependency Injection

• Angular Forms (Template-Driven & Reactive)

• HTTP Client & API Integration

• Routing & Navigation

• Mini Project: E-Commerce Product Catalog

---

🔹 Module 7: Modern UI/UX Design

• UI vs UX – Key Principles

• Color Theory & Typography in Web Design

• Wireframing & Prototyping (Figma/Adobe XD)

• Accessibility & Inclusive Design

• Animation & Micro-interactions (CSS + JavaScript)

• Best Practices for Modern Web Design

• Mini Project: Redesign a Popular Website with Better UX

---

🔹 Final Capstone Project

🎯 Build a Full-Stack Style Frontend Project combining:

• HTML, CSS, Bootstrap for structure

• JavaScript for interactivity

• React/Angular for frontend app

• TypeScript for scalability

• UI/UX principles for design

💡 Example: E-Learning Website / Food Delivery App / Online Portfolio with Dashboard

---

✅ Extras from Paath Shiksha:

• Weekly Assignments + Quizzes

• Mini Projects after every module

• Interview Prep (MCQs + Coding Challenges)

• Certification on Completion

• Share this post :