UNIT Actual Plan comments

Topic/SubTopic Depth Code Descripton of Depth L T P Week

1 Introduction 6 2 2 2
Explain the concept of traditional vs.
modern web apps , Explain evolution of
Overview of Web Applications static to dynamic web application,
& Evolution of Web Explain the concept multi-tier & single-
1.1 Architecture E, D, I, QA page architectures with diagrams.
Client–Server Architecture, Architecture diagrams, HTTP request–
HTTP, HTTPS, URLs, DNS, response cycle, DNS lookup flow,
1.2 Web Browsers E, D, I, DW, QA browser rendering basics.
HTML Basics: Syntax, Tags,
Attributes, Document Structure Demonstration of basic HTML structure,
1.3 E, DM, I, PRG headings, paragraphs, links, images.
Forms & Inputs, Tables, Lists,
Multimedia Practical implementation of forms,
1.4 DM, PRG, NUM, QA interactive inputs, audio/video tags.
Semantic HTML5 Elements
1.5 E, I, DM Header, footer, section, article, nav, etc.
CSS Basics: Selectors,
Properties, Values, Box Model CSS rules, inline/internal/external
1.6 E, DM, PRG, PS styles, margin/padding/border.
CSS Framework: Bootstrap
Introduction Grid system demo, containers,
1.7 DM, PRG, ACT responsive layout activity.

JavaScript and Client-Side

2 Programming 12 4 4 4
E, D, DM, QA Intro to scripting, JS execution
2.1 JavaScript Essentials model, placement in HTML.
Data Types, Variables, Control
Structures, Functions E, DM, PS Practical coding of loops, conditionals,
2.1.1 functions.
DOM Manipulation, Events,
Form Validation DM, ACT, PRG Selecting elements, updating UI, event
2.1.2 listeners, validation.
Local Storage & Session
Storage E, DM, PRG Storing and retrieving key-value data;
2.1.3 building a small demo.
 GUI Interactions (Basic
Dynamic UI) DM, ACT, I Hover effects, dynamic menus, modals
2.1.4 (JS-only).
JavaScript Library: jQuery E, DM, PRG DOM shortcuts, event handling,AJAX
2.1.5 basics.
E, D, DM, PS Let/const, arrow functions,
2.2 Modern JavaScript (ES6+) destructuring, spread/rest.
sync Operations: Callbacks,
Promises, Async/Await E, I, DM, PS Understanding async flow; building
2.2.1 simple API calls.
Modules and Imports DM, PRG
2.2.2 Structuring JS files using ES modules.
2.3 Client-Side Applications
Client-Side Applications:
Introduction to React JS E, I, DM
2.3.1 React JSX, components, rendering.
Traditional Multi-Page Apps vs
SPAs E, I, QA
2.3.2 SPA concept, reload-free navigation.
React Component-Based UI &
Props DM, ACT, PRG Building functional components with
2.3.3 props.
State Management & Data
Flow DM, PS, PRG useState, one-way data flow, parent-
2.3.4 child states.
Client-Side Routing (React
Router) DM, PS Navigation without reloading, routing
2.3.5 basics.
Fetch API: Fetching, Displaying
Data, Handling Errors &
Loading States DM, NUM, PRG Working with real/placeholder API, error
2.3.6 handling.
Comparison of JS Libraries:
React vs Angular vs Vue E, I, REV
2.3.7 Strengths, weaknesses, use cases.

Server-Side Web
3 Programming 9 4 4 4
Introduction to MVC
Architecture E, D, I, QA Model–View–Controller pattern, flow
3.1 . diagrams, responsibilities.
 Role of Backend in Web
Applications E, I, D Server logic, routing, business logic,
3.2 . security layers
Backend Web Framework:
Django (Overview) E, DM, I Django apps, MTV pattern, project
3.3 structure.
Handling Requests &
Responses DM, PRG, ACT Writing views, HTTP methods, JSON
3.4 response.
Form Data Handling &
Sessions DM, PS, PRG Form POST processing, CSRF, session
3.5 . usage
Routing, Middleware,
Templates DM, DW, PRG URL dispatcher, custom middleware,
3.6 . Template language
Overview & Comparison of
Backend Frameworks E, I, REV Django vs Flask vs FastAPI vs .NET
3.7 . MVC vs Rails vs Spring Boot vs [Link]
Database Integration:
Relational vs NoSQL, CRUD,
ORM E, DM, PRG Using Django ORM, basic models,
3.8 performing CRUD.
Authentication & Authorization:
Cookies, Sessions, JWT E, DM, PS Login flow, cookies vs sessions, intro to
3.9 JWT.
Middleware for Logging, Error
Handling, Security DM, PRG, ACT Build simple custom middleware for
3.1 . logging & error handling

4 Web Services & APIs 7 3 3 3

API Basics: Role in Web
Applications E, D, I, QA What APIs are, why they are used,
4.1 browser–server communication.
REST Principles and RESTful
API Design E, D, DW, DM HTTP verbs, endpoints, statelessness,
4.2 resource modeling, API structure.
JSON vs XML Data Exchange E, D, I, NUM JSON syntax, XML structure,
4.3 differences, parsing demo.
Validating request data,
Data Validation & Serialization DM, PS, PRG serializing/deserializing objects (Django
4.4 REST or similar).
 Microservices Architecture
Basics E, I, DM Microservices concepts, API gateway,
4.5 loose coupling, communication.
Building & Testing a Simple
REST API DM, PRG, ACT Implementing endpoints, returning
4.6 JSON, testing via Postman/browser.

5 Web Application Security 6 1 1 1

Common Vulnerabilities: XSS,
SQL Injection, CSRF E, D, I, DM Explanation + demonstration of
5.1 vulnerabilities with small examples.
Security Best Practices (Input
Validation, Sanitization,
HTTPS, Secure Cookies, Env
Variables) E, DM, PS Secure coding practices, showing
5.2 validation/sanitization techniques.
Authentication Practices &
Token Handling E, D, DM, PS Password hashing, sessions, JWT flow,
5.3 secure token handling.
Security in Full-Stack Apps:
CORS, Safe Sessions E, DM, ACT CORS policies, session hardening,
5.4 browser security settings.

Web Application Deployment

6 and Modern Trends 5 1 1 1
Full-Stack Development Understanding frontend–backend
Overview E, I, D integration, build pipeline, API
6.1 integration
Testing and QA E, DM, PS Unit tests, integration tests, UI testing
6.2 basics, automation overview.
DevOps, CI/CD E, D, DM Pipelines, GitHub Actions, Docker intro,
6.3 deployment workflow.
Progressive Web Apps (PWAs) E, I, DM Service workers, caching, offline-first,
6.4 manifest files.
Responsive Design & Usability DM, ACT, I Mobile-first approach, breakpoints, UX
6.5 considerations.