Department of Computer Science and Engineering
Full Stack Web Development – 15-Day Syllabus (2 Hours/Day)
Week 1: Front-End Foundations
Day 1 – Introduction & HTML Basics
● Topics:
o Full Stack Overview (Frontend, Backend, Database)
o Role of HTML in Web Development
o Basic HTML Tags (headings, lists, links, images, tables)
o HTML Forms and Attributes
● Hands-on Activity:
Create a static personal portfolio using HTML.
Day 2 – CSS Styling
● Topics:
o Types of CSS (inline, internal, external)
o Selectors, Properties, Values
o Box Model, Positioning
o Responsive Design Basics (media queries)
● Hands-on Activity:
Style the Day 1 portfolio using CSS, add responsive layout.
Day 3 – JavaScript Fundamentals
● Topics:
o JS Basics (variables, data types, operators)
o Conditional Statements, Loops
o Functions and Events
o DOM Manipulation Basics
● Hands-on Activity:
Add interactive JavaScript (click events, toggles) to portfolio.
Day 4 – JavaScript Advanced
● Topics:
o Arrays & Objects
o JavaScript Form Validation
o Introduction to Fetch API
o Error Handling
● Hands-on Activity:
Create a feedback form with client-side validation.
Day 5 – React JS: Getting Started
● Topics:
o What is React? Why React?
o Setting up React Environment (Vite/CRA)
o JSX, Components, Props
o Folder Structure
● Hands-on Activity:
Build a React app that displays a list of user profiles using props.
Week 2: React + Backend Development
Day 6 – React State & Events
● Topics:
o State Management using useState
o Handling Events
o Conditional Rendering
o Forms in React
● Hands-on Activity:
Create a Todo App with add/remove functionality.
Day 7 – React Routing & Hooks
● Topics:
o React Router DOM: Routing, Links, Params
o useEffect Hook
o Passing Props with Routes
o Basic API Integration using Fetch/Axios
● Hands-on Activity:
Create a multi-page app (Home, About, Contact) using React Router.
Day 8 – Node.js and NPM Basics
● Topics:
o Intro to Node.js and server-side JS
o NPM, package.json, scripts
o File System (fs), Path modules
o Creating a Simple HTTP Server
● Hands-on Activity:
Build a simple CLI tool using Node.js (e.g., file reader).
Day 9 – Express.js & REST APIs
● Topics:
o Intro to Express Framework
o Creating REST APIs (GET, POST, PUT, DELETE)
o Working with Middleware
o Routing & Status Codes
● Hands-on Activity:
Create an Express API for managing a list of books.
Day 10 – MongoDB & Mongoose Basics
● Topics:
o Intro to NoSQL & MongoDB
o MongoDB Atlas Setup
o Connecting Node.js with MongoDB
o Schema, Models, and CRUD with Mongoose
● Hands-on Activity:
Create a MongoDB model and connect with the Book API.
Week 3: Integration, Authentication & Deployment
Day 11 – Full Stack Integration
● Topics:
o Connecting React Frontend with Express API
o Using Axios to make API Calls
o CORS and Environment Variables
o Handling Asynchronous Operations
● Hands-on Activity:
Integrate the Book API into a React frontend.
Day 12 – User Authentication
● Topics:
o Authentication vs Authorization
o Password Hashing with bcrypt
o JWT Token Generation & Validation
o Protecting Routes in Express
● Hands-on Activity:
Create a login/register system using JWT.
Day 13 – Deployment & Version Control
● Topics:
o Git/GitHub Basics
o Hosting Frontend (Netlify/Vercel)
o Hosting Backend (Render/Heroku)
o Environment Setup for Production
● Hands-on Activity:
Deploy your Full Stack App and push code to GitHub.
Day 14 – Final Project Development
● Topics:
o Final Project Planning (e.g., Blog App, Task Manager)
o Team Collaboration and Code Division
o Project Implementation: Frontend + Backend + MongoDB
● Hands-on Activity:
Begin project development and seek instructor feedback.
Day 15 – Final Project Presentation & Review
● Topics:
o Project Completion & Testing
o Team Presentations
o Feedback & Improvements
o Course Recap and Career Roadmap (Internships, Certifications)
● Hands-on Activity:
Present the live Full Stack Project with walkthrough.
Final Project Ideas (Choose One):
● Student Management System
● Task Manager / ToDo with Login
● Job Board App
● Blog App with Admin Panel
● Complaint Tracker for Campus
HOD PRINCIPAL
Day-wise Hands-on
S.No Day Portions Covered Faculty Handled By
Activity
Introduction to Full Stack, HTML
Basics, Forms, Elements, Create a static personal Mr.V.Dharani AP/CSE
1 Day 1 Structure portfolio in HTML
CSS Basics, Selectors, Box Style the portfolio using
Model, Flexbox, Responsive CSS and make it Mr.V.Dharani AP/CSE
2 Day 2 Design responsive
JavaScript Fundamentals, Add toggle/menu
Variables, Loops, Functions, interactions to portfolio Dr.S.Muniyappan/HOD
3 Day 3 DOM using JS
JavaScript Advanced – Arrays,
Objects, Form Validation, Fetch Create a validated Dr.S.Muniyappan/HOD
4 Day 4 API contact/feedback form
React JS Basics – JSX, Build a React App
5 Day 5 Components, Props, Project Setup displaying a list of users Mrs.G.Porkodi AP/CSE
React State, useState, Forms, Build a Todo App with
Event Handling, Conditional add/remove task Mrs.G.Porkodi AP/CSE
6 Day 6 Rendering functionality
Create a multi-page
React Router DOM, useEffect, React App (Home, Mrs.G.Porkodi AP/CSE
7 Day 7 Axios Integration About, Contact)
Node.js Introduction, NPM, Basic
Modules (fs, path), Simple HTTP Build a simple file Ms.T.Lakshmi AP/CSE
8 Day 8 Server manager or CLI tool
Express.js Basics, REST APIs
(GET, POST, PUT, DELETE), Create a Book Ms.T.Lakshmi AP/CSE
9 Day 9 Routing, Middleware Management REST API
Connect Book API with
MongoDB & Mongoose – Atlas MongoDB and perform Mrs.S.Suji AP/CSE
10 Day 10 Setup, Schema, Models, CRUD CRUD
Full Stack Integration – React + Connect React frontend
Express + MongoDB, Axios, to Book API using Axios Mrs.S.Suji AP/CSE
11 Day 11 CORS
Authentication – JWT, bcrypt, Implement token-based
Login/Register API, Protected login/signup with Mrs.M.Akila AP/CSE
12 Day 12 Routes validation
Deployment – Git, GitHub, Deploy the Full Stack
Hosting with Vercel/Netlify (FE), app and host Mrs.M.Akila AP/CSE
13 Day 13 Render/Heroku (BE) frontend/backend
Final Project Development – Start building a project
Team-based, CRUD, Auth, UI like Blog App / Task All Staffs
14 Day 14 Design Manager
Final Project Completion, Final project
Presentation, Feedback, Career presentation and course All Staffs
15 Day 15 Guidance review
HOD PRINCIPAL
