Registration No:_______________ Submission Date:_________________
1: - Introduction ............................................................................. 1
2: - Project Objectives ..................................................................... 2
2.1 Design Goal .................................................................................... 2
2.2 Responsiveness Focus ......................................................................... 2
2.3 User Interaction ............................................................................ 2
2.4 Real-World Application ...................................................................... 2
3: - Tools and Technologies Used .......................................................... 3
3.1 HTML5 – Structure ........................................................................ 3
3.2 CSS3 – Styling/Layout ..................................................................... 3
3.3 JavaScript – Interactivity ................................................................ 3
3.4 VS Code – Code Editor ..................................................................... 3
3.5 Chrome – Testing Platform ................................................................. 3
4: - Website Pages & Structure ............................................................. 4
4.1 Home Page .................................................................................. 4
4.2 Product Page ................................................................................ 4
4.3 About Page .................................................................................. 4
4.4 Contact Page ................................................................................ 4
4.5 Footer Section .............................................................................. 4
5: - Full HTML Code ....................................................................... 6
6: - Full CSS Code ........................................................................... 7
7: - Full JavaScript Code ................................................................. 8
8: - Responsiveness Explanation ...................................................... 9
8.1 Flexbox and Grid System ................................................................. 9
8.2 Image Scaling ................................................................................ 9
8.3 Mobile Layout Hints ........................................................................ 9
9: - Screenshots ............................................................................ 10
9.1 Home Page Screenshot ................................................................... 10
9.2 Product Page Screenshot ................................................................. 10
9.3 Add to Cart Alert .......................................................................... 10
9.4 Contact Page Screenshot ................................................................. 10
10: - Future Scope ......................................................................... 11
10.1 Backend Integration ....................................................................... 11
10.2 Payment Gateway .......................................................................... 11
10.3 Admin Panel .................................................................................. 11
10.4 Mobile App Version ........................................................................ 11
11: - Conclusion ............................................................................ 12
Introduction
TimeEdge is a web-based e-commerce platform designed to sell premium and mid-range wrist watches
online. The primary aim of this project is to simulate a real-world online shopping experience using core
web development technologies: HTML, CSS, and JavaScript.
This project was developed as a part of the DIT 2nd Semester Web Development course and provides
students with a hands-on understanding of how websites are built and how an e-commerce layout functions.
The website enables users to:
Navigate a clean interface,
Browse multiple watch products,
View pricing and details,
Add items to the cart (using basic JavaScript),
Contact the brand through a form.
By working on TimeEdge, we not only explored technical skills like coding and design but also conceptual
skills such as user interface (UI), user experience (UX), and mobile responsiveness.
Project Objectives
The TimeEdge project was created with the following clear and practical objectives:
1. Design a visually attractive layout
The interface should reflect a professional e-commerce brand. Typography, colors, and spacing are
carefully chosen for visual harmony.
2. Build a responsive website
The layout must work smoothly on desktops, tablets, and mobile phones using CSS flexbox and
media queries.
3. List watch products dynamically
The watches are displayed using HTML and CSS grid layout, each in a product card format that
includes image, title, price, and button.
4. Implement interactivity using JavaScript
Clicking on the “Add to Cart” button will show an alert to simulate shopping cart interaction.
5. Provide brand and contact information
The About section explains the brand purpose, while the Contact page lets users send inquiries via a
form.
6. Learn by doing
Applying classroom concepts into a real-looking, working web interface enhances both confidence
and coding ability.
Tools and Technologies Used
This project uses modern and standard tools in web development to create a smooth, responsive e-commerce
site.
🔹 1. HTML5 (HyperText Markup Language)
Provides the structure of the website.
Used to define headings, paragraphs, buttons, forms, images, and layout containers.
Semantically meaningful for better accessibility and SEO.
🔹 2. CSS3 (Cascading Style Sheets)
Used for styling the HTML content.
Manages layout design, colors, padding, spacing, borders, animations, and responsive behavior.
Includes modern layout systems like Flexbox and Grid.
🔹 3. JavaScript (JS)
Adds interactivity and user-friendly behavior.
In this project, it handles actions like:
o Displaying an alert when a product is added to cart.
o Simulating simple logic without using a database.
🔹 4. Visual Studio Code (VS Code)
A free and powerful code editor.
Features used include:
o Code highlighting
o Live server extension
o Syntax error detection
🔹 5. Web Browser (Google Chrome)
Used for testing and previewing the website.
Built-in developer tools help test responsiveness, debug layout issues, and inspect code in real-time.
Website Pages & Structure
The Time Edge website is divided into multiple sections/pages, each serving a specific purpose. Below is a
breakdown of all the key components:
🔹 1. Home Page
Acts as the welcome page.
Contains a hero section with a call-to-action button like “Shop Now”.
Sets the tone for the entire site with branding and messaging.
🔹 2. Product Page
Displays a grid layout of available watches.
Each product has:
o An image of the watch
o The model name
o Price in PKR
o An “Add to Cart” button
Designed using HTML <div> tags and styled using CSS Flexbox/Grid.
🔹 3. About Page
Introduces the Time Edge brand.
Includes mission, vision, or a short paragraph describing who you are.
Builds trust with potential customers.
🔹 4. Contact Page
Contains a basic HTML form.
Fields include:
o Name
o Email
o Message
This form is for user feedback or inquiries (submission is not connected to a server in this version).
🔹 5. Footer
Appears at the bottom of every page.
Includes copyright.
Can also be expanded to include social media links or quick links.
Full HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeEdge - Watch Store</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>TimeEdge - Watch Store</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="home" class="hero">
<h2>Welcome to TimeEdge</h2>
<p>Discover stylish and premium watches made for everyone</p>
<button onclick="window.location='#products'">Shop Now</button>
</section>
<section id="products">
<h2>Our Watches</h2>
<div class="product-grid">
<div class="product-card">
<img src="watch1.jpg" alt="Watch 1">
<h3>Classic Leather</h3>
<p>PKR 5,500</p>
<button onclick="addToCart('Classic Leather')">Add to Cart</button>
</div>
<div class="product-card">
<img src="watch2.jpg" alt="Watch 2">
<h3>Metal Chrono</h3>
<p>PKR 8,000</p>
<button onclick="addToCart('Metal Chrono')">Add to Cart</button>
</div>
</div>
</section>
<section id="about">
<h2>About TimeEdge</h2>
<p>TimeEdge is a Pakistani e-commerce brand offering quality wrist watches at affordable prices for
fashion-forward individuals.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>© 2025 TimeEdge. All rights reserved.</p>
</footer>
</body>
</html>
Full CSS Code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
header {
background-color: #000;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 20px;
padding: 0;
nav ul li a {
color: #fff;
text-decoration: none;
.hero {
background-color: #222;
color: #fff;
padding: 100px 20px;
text-align: center;
.hero button {
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
cursor: pointer;
#products {
padding: 40px 20px;
background-color: #fff;
}
.product-grid {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
.product-card {
background: #eee;
padding: 20px;
border-radius: 10px;
width: 200px;
text-align: center;
.product-card img {
width: 100%;
height: auto;
#about, #contact {
padding: 40px 20px;
form input, form textarea {
display: block;
width: 100%;
padding: 10px;
margin: 10px 0;
form button {
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
cursor: pointer;
footer {
background: #000;
color: #fff;
text-align: center;
padding: 20px;
JavaScript Code
function addToCart(productName) {
alert(productName + " added to cart!");
🔍 Explanation:
This function is called whenever the user clicks the “Add to Cart” button on a product.
It takes product Name as a parameter and shows a browser alert that says:
o For example: “Classic Leather added to cart!”
This simulates the behavior of a cart without using any backend or storage.
Tip:
In future upgrades, this function can be expanded to:
Save cart items in local Storage
Track quantities
Update a visible cart icon
Connect with a backend server or database
Explanation of Responsive Design
Responsive design ensures that the website adjusts and looks good on all devices — from large desktop
monitors to small smartphones.
🔹 Why Responsiveness Matters
Most users visit websites using mobile phones.
Google also ranks mobile-friendly websites higher.
It improves user experience and reduces bounce rate.
🔹 How Time Edge is Responsive
1. CSS Flexbox and Grid
The product listing section uses flexbox layout, allowing product cards to wrap and adjust on small
screens.
For example, on desktop, 3 cards might appear in a row, but on mobile only 1 or 2.
2. Percentage-Based Widths
Instead of fixed sizes like width: 400px, we use width: 100% or relative units like em, rem, and %.
3. Responsive Images
The images inside product cards are styled using:
css
CopyEdit
img {
width: 100%;
height: auto;
}
This ensures images scale down or up depending on screen size.
4. Media Queries (Optional Future Upgrade)
Media queries can be added to further adjust font sizes, padding, or hide/show elements based on
screen size.
🔹 What You Can Improve
Add breakpoints with media queries like:
@media (max-width: 768px) {
.product-grid {
flex-direction: column;
Add hamburger menu for small screen navigation.
Screenshots of Website Pages
To demonstrate the working of the Time Edge e-commerce website, the following screenshots should be
captured from the browser and inserted in the report:
🖥️ 1. Home Page
Includes the website header, navigation menu, welcome message, and a "Shop Now" button.
Screenshot shows how the user is introduced to the brand.
👉
🛍️ 2. Product Page
Shows the list of watches, each with an image, name, price, and "Add to Cart" button.
Demonstrates layout and product presentation.
3. Add to Cart Alert
When the “Add to Cart” button is clicked, a JavaScript alert is triggered.
Capture this popup showing the product name added to cart.
💼 4. About Page
Contains a description of the Time Edge brand.
Optional screenshot showing brand info and message.
👉
✉️ 5. Contact Page
Displays a form with fields for Name, Email, and Message.
Shows a “Send” button.
Full website screenshot
Future Scope
Although the Time Edge project successfully implements a front-end e-commerce website, there are many
opportunities to expand its functionality and make it a fully operational platform.
🔧 1. Add Backend Functionality
Use languages like PHP, Node.js, or Python to handle:
o User registration/login
o Cart sessions
o Order management
🗃️ 2. Database Integration
Use a database like MySQL, MongoDB, or Firebase to:
o Store product listings
o Manage inventory
o Save customer messages or feedback
🛒 3. Real Cart System
Instead of using JavaScript alerts, build a complete cart that:
o Tracks quantity
o Displays selected items
o Shows total cost
o Lets users remove/edit items
💳 4. Payment Gateway Integration
Connect with online payment services like:
o Easypaisa, JazzCash
o Stripe, PayPal (for global use)
Allow secure checkout functionality
💼 5. Admin Dashboard
Create a login panel for the store owner/admin to:
o Add/Edit/Delete products
o View orders and messages
o Monitor website traffic
📱 6. Mobile App Version
Convert the website into a mobile app using:
o React Native
o Flutter
o PWA (Progressive Web App)
📈 7. SEO & Analytics
Add metadata, schema tags, and use Google Analytics to track:
o Page views
o Most popular products
o Customer behavior
Conclusion
The Time Edge project is a successful demonstration of building a basic front-end e-commerce website
using core web development technologies: HTML, CSS, and JavaScript.
Throughout the development of this project, I have:
Practiced writing structured and semantic HTML code.
Applied CSS styling to create a clean, modern, and responsive user interface.
Used JavaScript to add dynamic behavior such as an alert-based "Add to Cart" function.
Designed key e-commerce components like the Home, Product, About, and Contact sections.
This project helped bridge the gap between classroom theory and practical implementation. It laid the
foundation for:
Understanding user experience (UX) and responsive design
Exploring front-end development in real-world contexts
Preparing for future full-stack development by imagining server-side and database extensions
Time Edge proves that even a simple project can offer valuable learning outcomes when built with
dedication, planning, and creativity.
🎓 Outro
In conclusion, working on the Time Edge - E-Commerce Watch Store project has been a valuable learning
experience. It allowed me to apply theoretical concepts of HTML, CSS, and JavaScript into a real-world
layout while building something creative, functional, and user-friendly.
This project not only helped sharpen my technical skills but also gave me insight into UI/UX design,
responsiveness, and user interaction — all of which are essential for modern web development.
As a DIT 2nd Semester student, I now feel more confident in my ability to create professional web projects
from scratch and look forward to expanding this e-commerce model with backend, database, and payment
gateway integration in future semesters.
Thank you for reviewing my work.
