Web Application Programming Lab

Master modern web development through hands-on, practical labs

Explore Labs

Labs Assignment

Learn the basics and build something basic.

01 Beginner

Resume

Learn the fundamentals of semantic HTML5 and CSS, and created a portfolio.

HTML5 CSS3
⏱️ 1-2 hours
See Project →
02 Learning

Multipage Blog Website

Practice creating a website with multiple pages like Home, About, and Contact using basic HTML and CSS layout techniques.

⏱️ 2-3 hours
See Project →
01 Beginner

Smart Calculator with History

Design a calculator that performs basic arithmetic operations, stores last 5 calculations, displays history dynamically, and allows clearing history.

JavaScript DOM
⏱️ 2-3 hours
See Project →
01 Beginner

Student Marks & Grade Analyzer

Create a system where student details are stored as objects, marks for multiple subjects are entered, total, percentage, and grade are calculated, and results are displayed in a table highlighting pass/fail.

JavaScript Objects
⏱️ 2-3 hours
See Project →
01 Beginner

Dynamic To-Do List with Status Filter

Build a To-Do app that adds, deletes, and marks tasks as completed, filters tasks (All / Completed / Pending), and displays count of completed tasks.

JavaScript DOM
⏱️ 2-3 hours
See Project →
01 Beginner

Number Guessing Game with Score Tracking

Develop a game where the system generates a random number (1–100), user guesses the number, feedback is shown (High / Low / Correct), and score decreases on wrong attempts.

JavaScript DOM Conditional
⏱️ 2-3 hours
See Project →
05 Intermediate

Interactive Quiz Application

Create a quiz app where questions are stored as objects, one question is shown at a time, the user selects an answer, and the score is calculated and shown at the end.

JavaScript DOM Event Handling
⏱️ 3-4 hours
See Project →
06 Intermediate

Digital Clock & Countdown Timer

Create a web page that displays a real-time digital clock in 12-hour format and a countdown timer. The timer should take user input in seconds and alert the user when the countdown reaches zero.

JavaScript DOM Event Handling Timer
⏱️ 2-3 hours
See Project →
07 Intermediate

Dynamic Table Generator

Design a program that dynamically generates a table based on user input. The user provides the number of rows and columns, and the table is created accordingly. Additional controls allow rows to be added, deleted, and even rows to be highlighted.

JavaScript DOM Event Handling Dynamic UI
⏱️ 2-3 hours
See Project →
08 Intermediate

Simple E-Commerce Cart System

Create a shopping cart system using JavaScript objects. Users can add and remove products, update quantities, and see the total price change dynamically as the cart updates.

JavaScript Objects DOM Event Handling
⏱️ 2-3 hours
See Project →
09 Intermediate

Form Validation System

Develop a client-side form validation system that validates user input such as name, email, and password. Error messages should be displayed dynamically, and form submission must be prevented if validation fails.

HTML CSS JavaScript Form Validation
⏱️ 1.5–2 hours
See Project →
10 Intermediate

Event-Driven Color & Theme Manager

Create an interactive theme manager where users can dynamically change background, text, and button colors using events. The selected theme should be stored in an object, with a reset option to restore the default theme.

JavaScript Objects DOM Events
⏱️ 2–3 hours
See Project →