ACKNOWLEDGEMENT
It gives us immense pleasure to present the report of the undertaken during the
Bachelor of Technology first year. We would like to express our deep and sincere
gratitude to our project guide Ms. Rajni Sobti for providing us excellence guidance,
encouragement and inspiration throughout the mini project work. Her logical thinking
and understanding in "WEB DEVELOPMENT" have greatly influenced us in our
project work. It was a great experience working with her because of her friendly
nature. We are highly thankful to her for her immense support and giving us full
freedom to carry out our work in our own way.
INDEX
CONTENT PAGENO.
INTRODUCTION TO E-COMMERCE.............................................. 1
INTRODUCTION TO HTML AND CSS........................................... 2
BRIEF DISCRIPTION ABOUT AMAZON CLONE.........................5
CONCLUSION..................................................................................... 9
REFERENCE....................................................................................... 10
1. Introduction to E-Commerce
Electronic Commerce, commonly known as E-Commerce, refers to the buying and
selling of goods and services over the internet. It has revolutionized the way
businesses operate and how consumers shop, breaking geographical barriers and
enabling transactions to occur 24/7. From its humble beginnings in the 1990s with
simple online retail stores, e-commerce has rapidly evolved into a sophisticated,
multibillion-dollar global industry that encompasses everything from online shopping
and digital payments to mobile commerce and virtual marketplaces.
E-commerce provides convenience, speed, and a wider reach to both buyers and
sellers. For consumers, it means access to a broader range of products, competitive
pricing, and the comfort of shopping from home. For businesses, it opens up new
markets, reduces operational costs, and offers tools for personalized marketing and
customer engagement. Platforms like Amazon, Alibaba, and eBay have become
household names, facilitating millions of transactions daily and setting new standards
in logistics and customer service.
There are various types of e-commerce, including Business-to-Consumer (B2C),
Business-to-Business (B2B), Consumer-to-Consumer (C2C), and Consumer-to-
Business (C2B), each serving different needs and audiences. With advancements in
technology such as artificial intelligence, big data analytics, and secure payment
systems, the e-commerce experience continues to improve, offering faster, safer, and
more personalized services.
As the digital economy expands, e-commerce plays a critical role in shaping the
future of global trade. It empowers small businesses to compete with large
corporations, promotes innovation in logistics and supply chain management, and
transforms customer expectations. Despite challenges such as cybersecurity threats,
intense competition, and regulatory issues, the future of e-commerce looks promising,
with continual growth and innovation on the horizon.
Page 1
Here is a list of common HTML tags and their uses:
📄 Structure & Document Tags
<!DOCTYPE html> — Declares the document type and HTML version.
<html> — Root element of an HTML document.
<head> — Contains metadata, title, scripts, styles.
<body> — Contains the visible content of the webpage.
📝 Metadata & Headings
<title> — Defines the document title shown in the browser tab.
<meta> — Provides metadata like charset, viewport, description.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> — Headings from largest (h1) to
smallest (h6).
🖋 Text Content
<p> — Paragraph.
<br> — Line break.
🔗 Links and Navigation
<a> — Anchor/link.
📋 Lists
<ul> — Unordered list (bullets).
🗂 Grouping and Sections
<div> — Generic container for grouping elements.
<span> — Inline container for text or elements.
<header> — Introductory content or navigation.
<footer> — Footer section of a page or section.
🛠 Forms and Input.
<select> — Drop-down list.
<button> — Clickable button.
Page 3
2.2 CSS LANGUAGE
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be
displayed on screen.
Some of the CSS demo are given below: -
🧱 Basic CSS Selectors
These are used to select HTML elements for styling:
* – Universal selector (selects all elements).
.class – Selects all elements with the specified class.
#id – Selects a single element with the specified ID.
🎨 Text and Font Styling
Used to style text content:
color – Text color.
font-size – Size of text.
font-weight – Thickness (e.g., normal, bold, 400).
text-align – Aligns text (left, center, right, justify).
📦 Box Model Properties
Control the layout and spacing of elements:
width / height – Set element dimensions.
margin – Space outside the element.
padding – Space inside the element.
border – Border around the element.
🎛 Display and Positioning
Control how elements are laid out:
display – Defines display behavior (block, inline, flex, grid, etc.).
top, right, bottom, left – Offset positions (used with position).
🖼 Background and Borders
background-color – Background color.
background-image – Background image.
background-size – Size of background image (cover, contain, etc.).
border – Border shorthand (width, style, color).
📐 Flexbox and Grid Layout
display: flex – Enables flexbox layout.
justify-content – Aligns items horizontally (flexbox).
align-items – Aligns items vertically (flexbox).
flex – Shorthand for grow, shrink, and basis.
display: grid – Enables grid layout.
Page 4
3. DESCRIPTION ABOUT AMAZON CLONE
HTML (HyperText Markup Language) forms the backbone of the webpage by
defining the structure and content. Using HTML, developers create elements like the
chat window, message input box, send button, and areas where the conversation
appears. For example, a <form> element might be used to capture user messages,
<input> or <textarea> tags provide fields for typing, and <div> or <section>
containers group chat messages and layout components. Semantic HTML tags ensure
the page is organized, accessible, and easy for browsers and assistive technologies to
understand.
However, HTML alone only provides the raw structure, which without styling would
look very plain and uninviting. That’s where CSS (Cascading Style Sheets) comes
in. CSS styles the HTML elements by setting colors, fonts, sizes, margins, and
positioning to create an attractive and intuitive user interface. For example, CSS can
make the chat window scrollable, set the background color to a soothing tone, style
the send button with hover effects, and differentiate user messages from AI responses
using different colors or alignment. CSS can also make the chatbot responsive, so it
looks good on both desktop and mobile devices by adjusting layout properties based
on screen size.
Together, HTML and CSS define everything the user sees and interacts with—the
chat bubbles, input area, buttons, and overall layout. They ensure that the interface is
not just functional but also visually engaging and user-friendly. HTML and CSS are
crucial as the foundation that shapes the user experience and accessibility of an AI
chatbot like Claude.
Amazon Clone Website - Brief Report
The Amazon Clone website, accessible locally at
http://127.0.0.1:5500/Clone/Home/index.html, is a functional replication of the
popular Amazon e-commerce platform designed to simulate a real online shopping
experience.
3.1 Overview:
The website features a clean and user-friendly interface modeled after Amazon's
design, allowing users to browse through a variety of products categorized efficiently.
The homepage showcases featured products with clear images and pricing, inviting
users to explore further.
3.2 Key Functionalities:
Homepage: Displays featured products with images, names, prices, and
interactive buttons to add items to the cart or view details.
Navigation: A well-structured navigation bar enables easy access to different
product categories, user account options, and the shopping cart.
Page 5
Product Pages: Detailed product descriptions with images, price details, and
options for quantity selection.
Shopping Cart: Users can add products to the cart, review items, update
quantities, and see the total amount.
Responsive Design: The website adjusts well to different screen sizes,
ensuring usability on both desktop and mobile devices.
User Interaction: Buttons and links are responsive, providing a smooth user
experience during browsing and purchasing activities.
3.3 Technical Implementation:
Built using HTML and CSS, ensuring fast load times and smooth interactions.
The design emphasizes simplicity and functionality, closely following
Amazon's recognizable elements.
3.4 Scope for Improvement:
Integration with backend services (like user authentication, payment
processing, and order tracking) can enhance the website’s realism and usability.
Adding database connectivity would allow persistent storage of user data and
product inventory.
Incorporating advanced features like product reviews, search functionality, and
personalized recommendations would further enrich the user experience.
Page 6
4. CONCLUSION
The conclusion of this mini project is to learn about web development and we did
learn that from making a static website by using HTML and CSS language.
However as per of our major project, our main website is personal, dynamic and in
future will be commercial which we also made in these times will be going to
merge with our major project and in that project web development, software
development and many other things we have to do and for that project this project
was necessary.
Page 9
5. References
https://www.amazon.com/
https://www.amazon.in/?ref=aisgw_intl_stripe_in
https://www.google.com/
https://www.youtube.com/
https://www.youtube.com/watch?v=ESnrn1kAD4E
https://www.youtube.com/watch?v=HcOc7P5BMi4
https://www.youtube.com/watch?v=nGhKIC_7Mkk&t=3100s
https://fontawesome.com/
https://www.google.com/chrome/
https://code.visualstudio.com/
Page 10
