Web Technology Assignment

KPR Institute of Engineering and Technology

Course

• Course Code: U21CS501
• Course Title: Web Technology
• Assignment: I
• Academic Year: 2026–2027

---

Assignment Questions

This repository contains the individual implementations of all five Web Technology assignment scenarios.

---

Question 1 – Web Technology Fundamentals

Scenario

A newly established educational institution plans to launch its official website.

Topics Covered

• Internet Overview
• Fundamental Computer Network Concepts
• TCP/IP
• URL and URL Structure
• Domain Name
• Web Browsers
• Web Servers
• Working Principle of a Website
• Client-side Scripting
• Server-side Scripting

Files

question-1/
├── index.html
└── style.css

---

Question 2 – Student Admission Form

Scenario

A college wants to digitize its student admission process.

Task

Design a responsive Student Admission Form using HTML5 and CSS3.

The webpage should demonstrate:

• HTML Form Elements
• Different Input Types
• Media Elements (Image / Video / Audio)
• CSS3 Selectors
• Box Model
• Responsive User Interface

Concepts Demonstrated

• HTML Form Elements
• Different HTML Input Types
  • Text Input
  • Email Input
  • Date Input
  • Number Input
  • Radio Buttons
  • Checkboxes
  • Select and Option Elements
  • Textarea
  • File Upload
• Form Validation
• Image Element
• Audio Element
• Video Element
• CSS3 Selectors
• CSS Box Model
• Responsive Web Design
• User Interface Design

Technologies Used

• HTML5
• CSS3
• JavaScript

Files

question-2/
├── index.html
├── style.css
└── media/
    ├── admission-audio.mp3
    ├── campus.jpg
    └── university-lecture.mp4

---

Question 3 – Online Fashion Store

Scenario

An online fashion store wants an attractive home page to improve customer engagement.

Task

Design the homepage using HTML5 and CSS3 by incorporating:

• Backgrounds and Borders
• Text Effects
• CSS Animations
• Multiple Column Layout
• User Interface Design Principles

Concepts Demonstrated

• HTML5 Page Structure
• CSS3 Styling
• Background Properties
• Border Properties
• Text Effects
• CSS Animations
• Multiple Column Layout
• Content Organization
• User Interface Design Principles
• Attractive Homepage Design
• Customer Engagement
• Responsive Layout

Technologies Used

• HTML5
• CSS3

Files

question-3/
├── index.html
└── style.css

---

Question 4 – Student Grade Calculator

Scenario

A school wants to automate the student grade calculation process.

Task

Develop a JavaScript program that accepts marks of five subjects and displays the Total, Average, Grade, and Pass/Fail status.

The solution should demonstrate:

• Variables and Data Types
• Literals
• Operators
• Statements
  • Selection
  • Iteration
• User-defined Functions

Concepts Demonstrated

• JavaScript Variables
• JavaScript Data Types
• JavaScript Literals
• Arithmetic Operators
• Relational Operators
• Conditional Statements
• Selection Statements
• Iteration Statements
• User-defined Functions
• Total Marks Calculation
• Average Marks Calculation
• Grade Calculation
• Pass/Fail Determination
• Dynamic Output

Technologies Used

• HTML5
• CSS3
• JavaScript

Files

question-4/
├── index.html
├── style.css
└── script.js

---

Question 5 – Supermarket Billing System

Scenario

A supermarket wants to generate customer bills automatically.

Task

Develop a JavaScript program to calculate the bill amount for three purchased products.

The program should:

• Accept quantity and unit price for each product
• Calculate the total bill
• Apply a 10% discount if the total amount exceeds ₹2000
• Display the final payable amount

Concepts Demonstrated

• JavaScript Variables
• JavaScript Data Types
• JavaScript Literals
• Arithmetic Operators
• Conditional Statements
• User-defined Functions
• Product Quantity Input
• Unit Price Input
• Individual Product Amount Calculation
• Total Bill Calculation
• Discount Calculation (10% Discount Condition)
• Final Payable Amount
• Dynamic Bill Generation

Technologies Used

• HTML5
• CSS3
• JavaScript

Files

question-5/
├── index.html
├── style.css
└── script.js