💻 Web-Computing Experiments

A collection of 10 hands-on web computing experiments demonstrating core concepts of web technologies, client-server communication, and browser-based computation.

📋 Project Overview

This repository contains practical implementations of various web development concepts, ranging from basic HTML structure to advanced React applications and network simulations. Each experiment is self-contained and focuses on specific web technologies.

---

🧪 Experiments

Experiment 1: Basic HTML Structure 📄

Location: Exp1/exp1.html

Technologies: HTML5

Description: A simple, single-page website for "Anjuman-I-Islam's Kalsekar Technical Campus" demonstrating fundamental HTML elements including headings, paragraphs, hyperlinks, tables with department information, and a contact form.

How to Run:

# Open the file directly in a web browser
open Exp1/exp1.html

---

Experiment 2: HTML with External CSS 🎨

Location: Exp2/index.html, Exp2/styles.css

Technologies: HTML5, CSS3

Description: A stylish webpage for "Umar's Book Haven" bookstore demonstrating the separation of content and presentation. The HTML structure is defined in index.html while all styling (layout, colors, fonts) is managed through an external stylesheet.

How to Run:

# Open the file directly in a web browser
open Exp2/index.html

---

Experiment 3: Responsive Design with Bootstrap 📱

Location: Exp3/index.html

Technologies: HTML5, Bootstrap 5

Description: An online bookstore webpage utilizing Bootstrap 5 framework for responsive, mobile-first design. Features include a navigation bar, hero section, and a grid of book cards that automatically adjusts to different screen sizes.

How to Run:

# Open the file directly in a web browser
open Exp3/index.html

---

Experiment 4: JavaScript Form Validation ✅

Location: Exp4/index.html, Exp4/style.css

Technologies: HTML5, CSS3, JavaScript

Description: A registration form for "AIKTC Engineering" implementing client-side validation using JavaScript. Validates minimum name length, email format, password requirements, and ensures 10-digit mobile numbers before form submission.

How to Run:

# Open the file directly in a web browser
open Exp4/index.html

---

Experiment 5: Frontend with React and TypeScript ⚛️

Location: Exp5/src/App.tsx, Exp5/package.json

Technologies: React, TypeScript, Vite

Description: A modern, single-page registration form built with React and TypeScript. Implements state management using React hooks (useState) for handling form inputs and validation logic. The project uses Vite for fast development and building.

How to Run:

# Navigate to the experiment directory
cd Exp5

# Install dependencies
npm install

# Start the development server
npm run dev

# The application will be available at http://localhost:5173

---

Experiment 6: Node.js Command-Line Application 🧮

Location: Exp6/calculator.js

Technologies: Node.js

Description: A command-line calculator application built with Node.js. Accepts two numbers and an operation (add, sub, mul, div) as user input and outputs the calculated result to the console.

How to Run:

# Navigate to the experiment directory
cd Exp6

# Run the calculator
node calculator.js

# Follow the prompts to enter numbers and select an operation

---

Experiment 7: Network Simulation 🌐

Location: Exp7/Exp7.pkt

Technologies: Cisco Packet Tracer

Description: Network simulation file demonstrating networking concepts using Cisco Packet Tracer. This simulation explores network topology design, device configuration, and packet flow analysis.

How to Run:

# Open the file in Cisco Packet Tracer
# File > Open > Navigate to Exp7/Exp7.pkt

---

Experiment 8: Network Simulation 🌐

Location: Exp8/Exp8.pkt

Technologies: Cisco Packet Tracer

Description: Advanced network simulation file created with Cisco Packet Tracer, demonstrating additional networking protocols and configurations.

How to Run:

# Open the file in Cisco Packet Tracer
# File > Open > Navigate to Exp8/Exp8.pkt

---

Experiment 9: Network Simulation 🌐

Location: Exp9/Exp9.pkt

Technologies: Cisco Packet Tracer

Description: Network simulation file showcasing complex networking scenarios and troubleshooting techniques using Cisco Packet Tracer.

How to Run:

# Open the file in Cisco Packet Tracer
# File > Open > Navigate to Exp9/Exp9.pkt

---

Experiment 10: Reserved for Future Development 🚧

Location: Exp10/

Status: Empty - available for future experiments

---

✅ Prerequisites

• Web Browser: Modern browser (Chrome, Firefox, Safari, Edge) for Experiments 1-4 🌐
• Node.js: Version 14 or higher for Experiments 5 and 6 📦
• npm: Comes with Node.js installation
• Cisco Packet Tracer: Required for Experiments 7, 8, and 9 🔧

🚀 Getting Started

1. Clone this repository:

   git clone <repository-url>
   cd Web-Computing

2. Navigate to the specific experiment directory you want to run

3. Follow the individual experiment instructions listed above

📂 Project Structure

Web-Computing/
├── Exp1/          # Basic HTML Structure
├── Exp2/          # HTML with External CSS
├── Exp3/          # Responsive Design with Bootstrap
├── Exp4/          # JavaScript Form Validation
├── Exp5/          # React + TypeScript Application
├── Exp6/          # Node.js CLI Calculator
├── Exp7/          # Network Simulation (Packet Tracer)
├── Exp8/          # Network Simulation (Packet Tracer)
├── Exp9/          # Network Simulation (Packet Tracer)
└── Exp10/         # Reserved for Future Development

🎯 Learning Objectives

• Understand HTML document structure and semantic markup
• Master CSS styling and responsive design principles
• Implement client-side form validation with JavaScript
• Build modern web applications using React and TypeScript
• Develop Node.js command-line applications
• Explore network topology and configuration using simulation tools

📝 License

This project is intended for educational purposes.