Scribd
Upload
25 views

Ecommerce Website Using HTML CSS and Javascript _ Simple and Responsive Ecommerce Website

The document provides a guide on how to create a simple and responsive e-commerce website using HTML, CSS, and JavaScript. It outlines the essential components required for building the website, including the layout structure, header, main content sections, and responsive design considerations. The guide also includes code snippets and examples to help users visualize and implement their own e-commerce site.

Uploaded by

koduru cnu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Ecommerce Website Using HTML CSS and Javascript _ Simple and Responsive Ecommerce Website

The document provides a guide on how to create a simple and responsive e-commerce website using HTML, CSS, and JavaScript. It outlines the essential components required for building the website, including the layout structure, header, main content sections, and responsive design considerations. The guide also includes code snippets and examples to help users visualize and implement their own e-commerce site.

Uploaded by

koduru cnu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

-23% -24% -24%

₹49,999 ₹37,999
OnePlus Phones At Best Deals
Croma

Home  clone project

Ecommerce Website using HTML


CSS and Javascript | Simple and
Responsive Ecommerce Website
 Himanshu Singh  January 12, 2022  1 Comments

Ecommerce Website using HTML CSS and


Javascript | Simple and Responsive
Ecommerce Website

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 1/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

Getting bored of shopping at Amazon, Flipkart or any other e-commerce website


wanted to do something new, then it's time to switch on your e-commerce website
😁.

Heyy....., wait one second did you have not your website. Don't feel bad, I
am here to help you to make you learn How to build an e-commerce website so
stay connected to the blog till the end and at the end, you have your e-commerce
website then do shopping as so as you want.

OnePlus 9 Pro (128GB Apple iPhone 13 Pro


ROM, 8GB RAM,… Max (256GB ROM,…
₹49,999 ₹64,999 ₹1,35,990
₹1,39,900

OnePlus 9 Pro (256GB Apple iPhone 12


ROM, 12GB RAM,… (128GB ROM, 4GB…
₹54,999 ₹69,999 ₹61,990 ₹70,900

Croma

Before discussing the procedure to make the website, let's lookout at How it looks.
You can look at my beautiful e-commerce website 👇😅.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 2/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code
LiveWith Random
Project:- Home Categories  Recent Post About Us P
Here you can check it.
EDIT ON
HTML CSS JS Result

<head>

<link rel="stylesheet" href="./ecommerce.css">


<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css"
rel="stylesheet">
</head>

<body>
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href="#">
Resources

You have seen my responsive e-commerce website layout and you started imagining your
website.

The important ingredients you should have for building an e-commerce website.
Following are some skills required for building this webpage:-
.

1.HTML.
2.CSS.
3. Javascript(Basics).

HTML for Responsive Ecommerce Website:-


Like Skelton system (the frame/structure of bones) of the human body gives a
structure/layout to the human body. Similarly, HTML code does the same it gives the
layout to the websites.

Don't worry you don't need any biology knowledge for this website 😂.

Every webpage has three main section:-


1.Header(Navigation bar/menu/logo,etc.)
2.Main section(main content). 
3.Footer.
https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 3/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

1. Header:-
Below there is a picture of the navigation bar which contains the brand name/logo,
search bar, and menu items, this all comes under the header.

1. In the header section, firstly made three divs. One for the logo, second for the search bar,
and third for menu lists.
In the second class, I have used the search icon I have imported through ionicon , for any
type of icons used in website development you can use it.

Input is a tag used for many purposes for like checkboxes, radio, email input, date, time,
and others. But here we are using for search bar so type is text. For more ideas, you can
refer to our other blogs.

<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>

</ul>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 4/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

</div>

Code With Random


</header> Home Categories  Recent Post About Us P

As our website should be Responsive(A Responsive website is automatically adjusted


for different screen sizes and viewports.)
For Example:-Blogger website is also responsive you can easily use comfortably it on a
phone(small screens) and PC(big-sized screens).

OnePlus 9 Pro (128GB Apple iPhone 13 Pro


ROM, 8GB RAM,… Max (256GB ROM,…
₹49,999 ₹64,999 ₹1,35,990
₹1,39,900

OnePlus 9 Pro (256GB Apple iPhone 12


ROM, 12GB RAM,… (128GB ROM, 4GB…
₹54,999 ₹69,999 ₹61,990 ₹70,900

Croma

So when we are using the website there is a problem that it is not able to show all the
menu lists on the navbar. Finally, we decided to make a button-operated menu list. So
when you click on the menu icon It will open into a menu list which you can see in the
next image.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 5/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P


You have seen how will solve the problem but now it's time to code. Add a menu class in
which a close icon you can see in the above image and also add a menu icon in the
heading1 class.

<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 6/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

Succeed online.

Now, the header section is over. Let's move forward to the main section.

2. Section:-
Section portion which mainly contains the content of a website, is divided section mainly
into two portions:-
section1 which contains image-slider, contains images. Section2 which contains container
class, contains different items.

In the image-slider, add different images using the img tag. In section2 add a container
named class inside that add items named classes as many items you want in your
website. In every item add item name, item price, item image and item info classes. If you
want you can also add one more class for categories.

<section>
<div class="section">

<div class="section1">

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 7/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="img-slider">

Code With Random Home Categories  Recent Post About Us


<img src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrg P
alt="" class="img">
<img src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrg
alt="" class="img">
<img src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrg
alt="" class="img">
<img src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb
alt="" class="img">
<img src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb
alt="" class="img">
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&
alt=""></div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img2"><img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3"><img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-cloth
alt=""></div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&
alt=""></div> 
<div class="name">SMART PHONE</div>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 8/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="price">$20</div>

Code With Randomipsum dolor


<div class="info">Lorem Home
sit.</div> Categories  Recent Post About Us P
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">TELEVISION</div>
<div class="price">$18</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""></div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""></div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div> 
<div class="items">

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 9/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="img img1"><img

Code With Random Home Categories  Recent Post About Us


src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id17739543 P
alt=""></div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""></div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dp
alt=""></div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-pictu
alt=""></div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&
alt=""></div> 
<div class="name">WASHING MACHINE</div>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 10/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="price">$56</div>

Code With Randomipsum dolor


<div class="info">Lorem Home Categories
sit amet consectetur, adipisicing
 Recent Post
elit.</div> About Us P
</div>
</div>
</div>
</div>
</section>

Section part is over.

Note:- Hey..... are you still thinking that why are we giving tag a class name, so the answer
is that it will help you while styling it. Let assume you want to apply the same styling on
many tags, then you need to style every tag one by one then the answer is No...
You can simply give all the tags same-named class and applying styling to one class will
style all the tags having the same class.

3. Footer:-
Footer is the last section of the website. In which add some details. Footer of the above
website is shown below in the picture.

Now how we are going to implement it????🤔🤔

Hope the above picture will help you to understand how to implement it. Firstly, Divide
the footer into main 4 classes namely footer0, footer1, footer2 and footer3.
Now it's time to implement its code.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 11/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

Inside the footer1 class, add one class for social media icons, then inside add their icons.
Similarly, add more classes in footer2 and footer3 as given below in code.

-23% -2% -21% -20% -17% -12%

₹49,999 ₹1,35,990 ₹54,999 ₹15,999 ₹38,999 ₹61,990

-8% -11% -24% -10% -23%

₹72,990 ₹5,284 ₹71,999 ₹37,999 ₹12,999 ₹13,000


Get Best Deals On Electronics
Croma

<footer>
<div class="footer0">
<h1>ShoPperZ</h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon> 
</a>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 12/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<a href="#">

Code With
<ion-icon Random Home
name="logo-twitter"></ion-icon> Categories  Recent Post About Us P
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">Copyright © <h4>ShoPperZ</h4> 2021-2028</div>
</footer>

<-----Now, HTML code ends---->

FULL HTML CODE AT ONCE:-


Now it's time to add CSS and JAVASCRIPT files to the HTML.So As I am using the external
file for the CSS and JAVASCRIPT so I linked it in the HTML code.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 13/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<!DOCTYPE html>
Code With Random
<html lang="en">
Home Categories  Recent Post About Us P
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./ecommerce.css">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo"><a href="#">ShoPperZ</a></div>
<div class="menu">
<a href=""><ion-icon name="close" class="close"></ion-icon></a>
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrg
alt="" class="img">
<img src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrg
alt="" class="img">
<img src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrg

alt="" class="img">

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 14/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<img src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb

Code With Random


alt="" class="img"> Home Categories  Recent Post About Us P
<img src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb
alt="" class="img">
</div>
</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&
alt=""></div>
<div class="name">SHOES</div>
<div class="price">$5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img2"><img
src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">$6.34</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img3"><img
src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-cloth
alt=""></div>
<div class="name">JEANS</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">WATCH</div>
<div class="price">$9.1</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&
alt=""></div>
<div class="name">SMART PHONE</div>
<div class="price">$20</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb

alt=""></div>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 15/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="name">TELEVISION</div>

Code With Random


<div class="price">$18</div> Home Categories  Recent Post About Us P
<div class="info">Lorem ipsum dolor sit amet consectetur.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">HOODIES</div>
<div class="price">$6.7</div>
<div class="info">Lorem ipsum dolor sit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070"
alt=""></div>
<div class="name">DINNER SET</div>
<div class="price">$10</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BLANKETS</div>
<div class="price">$9.9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">LAPTOP</div>
<div class="price">$99</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519"
alt=""></div>
<div class="name">MICROWAVE</div>
<div class="price">$30</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id17739543
alt=""></div>
<div class="name">COFFEE MAKER</div>
<div class="price">$29.7</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div> 
</div>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 16/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<div class="items">

Code With Random


<div class="img img1"><img Home Categories  Recent Post About Us P
src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BED</div>
<div class="price">$100</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905"
alt=""></div>
<div class="name">AIR CONDITIONER</div>
<div class="price">$78</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dp
alt=""></div>
<div class="name">BOOK</div>
<div class="price">$9</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb
alt=""></div>
<div class="name">BAG</div>
<div class="price">$36.5</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-pictu
alt=""></div>
<div class="name">SAREES</div>
<div class="price">$25.6</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
<div class="items">
<div class="img img1"><img
src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&
alt=""></div>
<div class="name">WASHING MACHINE</div>
<div class="price">$56</div>
<div class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
</div>
</div>
</div>
</div> 
</section>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 17/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

<footer>

Code<div
With Random
class="footer0"> Home Categories  Recent Post About Us P
<h1>ShoPperZ</h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>
</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div> 
</div>

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 18/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

</div>

Code<div
With Random © <h4>ShoPperZ</h4>
class="footer3">Copyright Home Categories
2021-2028</div>
 Recent Post About Us P
</footer>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="./ecommerce.js"></script>
</body>
</html>

so the structure of our website is ready.

CSS:-
The structure of the website layout is completed but it doesn't look good without styling.
As human skeletal alone can't look good without skin. So here the work of styling is done
with the help of CSS.

Topics to be known before CSS tutorial:-


1.Flexbox.
2.CSS basics(selectors,color,border-box,etc).
3.pseduo effects(hover, active) and pseudo elements(before).
4.media queries(responsive) and keyframes(animation).

1. Firstly style the header. Use Flex property to align every flex item in the header in a line.

Succeed online.

then use the same for search menu and heading lists as flexbox. then align them in a
horizontal line using properties.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 19/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

2. set visibility of the menu class and heading class to be hidden because it should appear
Code
whenWith
the sizeRandom Home
of the screen is less. Categories
(when we are using  RecentorPost
it in phones tab). About Us P
3. Apply other properties and hover effects( HOVER effect works when the cursor goes
over the tag on which it is applied) to the header files as shown below.
4. Using the keyframe property which is used for the animation (I use for the image slider).
5. Apply styling on the items/products and their classes (flex and some other properties).
6. Similarly, apply some styling on Footer as shown below.
7. Finally when your webpage is ready now it's time to make it responsive so that it also
works fine on small screens(phones).
8. Use media queries property to make it responsive and inside it mention the properties
you want to see when the size of a screen is small.
finally, check your website is ready.

1: *{
2: margin: 0;
3: padding: 0;
4: box-sizing: border-box;
5: }
6: header{
7: display: flex;
8: justify-content: space-evenly;
9: align-items: center;
10: height:60px;
11: width:100%;
12: background:black;
13: }
14: .heading ul{
15: display:flex;
16: }
17: .logo a{
18: color:white;
19: transition-duration: 1s;
20: font-weight: 800;
21: }
22: .logo a:hover{
23: color:rgb(240, 197, 6);
24: transition-duration: 1s;
25: }
26: .heading ul li{
27: list-style: none;
28: }
29: .heading ul li a{
30: margin:5px;
31: text-decoration: none;
32: color:black; 
33: font-weight: 500;
https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 20/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

34: position:relative;

Code With
35: Random
color:white; Home Categories  Recent Post About Us P
36: margin:2px 14px;
37: font-size: 18px;
38: transition-duration: 1s;
39: }
40: .heading ul li a:active{
41: color:red;
42: }
43: .heading ul li a:hover{
44: color:rgb(243, 168, 7);
45: transition-duration: 1s;
46: }
47: .heading ul li a::before{
48: content:'';
49: height:2px;
50: width:0px;
51: position:absolute;
52: left:0;
53: bottom:0;
54: background-color: white;
55: transition-duration: 1s;
56: }
57: .heading ul li a:hover::before{
58: width:100%;
59: transition-duration: 1s;
60: background-color:rgb(243, 168, 7);
61: }
62: #input{
63: height:30px;
64: width:300px;
65: text-decoration: none;
66: border:0px;
67: padding:5px;
68: }
69: .logo a{
70: color: white;
71: font-size: 35px;
72: font-weight: 500;
73: text-decoration:none;
74: }
75: ion-icon{
76: width:30px;
77: height:30px;
78: background-color: white;
79: color:black;
80: }
81: ion-icon:hover{
82: cursor: pointer;
83: }
84: .search a{ 
85: display:flex;

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 21/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

86: }

Code With
87: header Random
a ion-icon{ Home Categories  Recent Post About Us P
88: position:relative;
89: right:3px;
90: }
91: .img-slider img{
92: height:720px;
93: width:1080px;
94: }
95: @keyframes slide{
96: 0%{
97: left:0px;
98: }
99: 15%{
100: left:0px;
101: }
102: 20%{
103: left:-1080px;
104: }
105: 32%{
106: left:-1080px;
107: }
108: 35%{
109: left:-2160px;
110: }
111: 47%{
112: left:-2160px;
113: }
114: 50%{
115: left:-3240px;
116: }
117: 63%{
118: left:-3240px;
119: }
120: 66%{
121: left:-4320px;
122: }
123: 79%{
124: left:-4320px;
125: }
126: 82%{
127: left:-5400px;
128: }
129: 100%{
130: left:0px;
131: }}
132: .img-slider{
133: display:flex;
134: float:left;
135: position:relative;
136: width:1080px; 
137: height:720px;

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 22/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

138: animation-name:slide;
Code With
139: Random
animation-duration: 10s; Home Categories  Recent Post About Us P
140: animation-iteration-count: infinite;
141: transition-duration:2s ;
142: }
143: .heading1 {
144: opacity:0;
145: }
146: .search{
147: display:flex;
148: position: relative;
149: }
150: .section1{
151: width:1080px;
152: overflow:hidden;
153: justify-content: center;
154: align-items: center;
155: margin:0px auto;
156: }
157: .section2 .container{
158: display:flex;
159: width:100%;
160: height:max-content;
161: flex-wrap: wrap;
162: justify-content:center;
163: margin:10px auto;
164: }
165: .section2 .container .items{
166: margin: 10px;
167: width:200px;
168: height: 300px;
169: background-color:white;
170: border:2.5px solid black;
171: border-radius: 12px;
172: }
173: .section2 .container .items .name{
174: text-align:center;
175: background-color:rgb(240, 197, 6);
176: height:25px;
177: padding-top:4px;
178: color:white;
179: margin: 0;
180: }
181: .section2 .container .items .price{
182: float:left;
183: padding-left:10px;
184: display: block;
185: width:100%;
186: color:rgb(255, 0, 0);
187: font-weight: 650;
188: } 
189: .section2 .container .items .info{

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 23/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

190: padding-left:10px;

Code With Random


191: color:rgb(243, 168, 7); Home Categories  Recent Post About Us P
192: }
193: .section2 .container .items .img img{
194: width:200px;
195: height:200px;
196: margin: 0;
197: padding: 0;
198: border-radius:12px;
199: transition-duration:0.8s;
200: }
201: .section2 .container .items .img {
202: overflow: hidden;
203: margin: 0;
204: }
205: .section2 .container .items:hover .img img{
206: transform: scale(1.2);
207: transition-duration:0.8s;
208: border-radius:12px;
209: }
210: footer{
211: display:flex;
212: flex-direction: column;
213: background-color: black;
214: align-items: center;
215: color:white;
216: }
217: .footer1{
218: display:flex;
219: flex-direction: column;
220: align-items: center;
221: color:white;
222: margin-top:15px;
223: }
224: .social-media{
225: display:flex;
226: justify-content: center;
227: color:white;
228: flex-wrap: wrap;
229: }
230: .social-media a{
231: color:white;
232: margin:20px;
233: border-radius: 5px;
234: margin-top:10px;
235: color:white;
236: }
237: .social-media a ion-icon{
238: color:white;
239: background-color: black;
240: } 
241: .social-media a:hover ion-icon{

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 24/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

242: color:red;

Code With
243: Random
transform: translateY(5px); Home Categories  Recent Post About Us P
244: }
245: .footer2{
246: display: flex;
247: width:100%;
248: justify-content:space-evenly;
249: align-items: center;
250: text-decoration: none;
251: flex-wrap: wrap;
252: }
253: .footer0{
254: font-weight:1200;
255: transition-duration: 1s;
256: }
257: .footer0:hover{
258: color:rgb(243, 168, 7);
259: }
260: .footer2 .heading {
261: font-weight: 900;
262: font-size: 18px;
263: }
264: .footer3 {
265: margin-top:60px;
266: margin-bottom: 20px;
267: display:flex;
268: flex-wrap: wrap;
269: justify-content: center;
270: }
271: .footer2 .heading:hover{
272: color:rgb(243, 168, 7) ;
273: }
274: .footer2 .div:hover{
275: transform: scale(1.05);
276: }
277: .footer3 h4{
278: margin:0 10px;
279: }
280: .footer2 div{
281: margin:10px;
282: }
283: .menu{
284: visibility:hidden;
285: }
286: .heading1 .ham:active{
287: color: red;
288: }
289: .items{
290: overflow:hidden;
291: }
292: .ham,.close{ 
293: cursor:pointer;

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 25/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

294: }

Code
295: With Random
@media screen Home
and (max-width:1250px){ Categories  Recent Post About Us P
296: .heading ul li{
297: display:none;
298: }
299: .items{
300: transform:scale(0.9);
301: }
302: .img-slider img{
303: height:60vw;
304: width:80vw;
305: }
306: .ham:active {
307: color:red;
308: }
309: .menu {
310: display:flex;
311: flex-direction: column;
312: align-items: center;
313: }
314: .menu a ion-icon{
315: position: absolute;
316: }
317: @keyframes slide1{
318: 0%{
319: left:0vw;
320: }
321: 15%{
322: left:0vw;
323: }
324: 20%{
325: left:-80vw;
326: }
327: 32%{
328: left:-80vw;
329: }
330: 35%{
331: left:-160vw;
332: }
333: 47%{
334: left:-160vw;
335: }
336: 50%{
337: left:-240vw;
338: }
339: 63%{
340: left:-240vw;
341: }
342: 66%{
343: left:-320vw;
344: } 
345: 79%{

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 26/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

346: left:-320vw;

Code With Random


347: } Home Categories  Recent Post About Us P
348: 82%{
349: left:-400vw;
350: }
351: 100%{
352: left:0vw;
353: }}
354: .menu ul{
355: display:flex;
356: flex-direction:column;
357: position: absolute;
358: width:100vw;
359: height:100vh;
360: background-color: black;
361: left:0;
362: top:0;
363: z-index:11;
364: align-items: center;
365: justify-content: center;
366: opacity:1;
367: }
368: .close{
369: z-index:34;
370: color:white;
371: background-color: black;
372: }
373: .close:active{
374: color:red;
375: }
376: .menu ul li{
377: list-style: none;
378: margin: 20px;
379: border-top:3px solid white;
380: width:80%;
381: text-align:center;
382: padding-top:10px;
383: }
384: .menu ul li a{
385: text-decoration: none;
386: padding-top: 10px;
387: color:white;
388: font-weight: 900;
389: }
390: .menu ul li a:hover{
391: color:rgb(240, 197, 6);
392: }
393: .img-slider{
394: display:flex;
395: float:left;
396: position:relative; 
397: width:80%;

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 27/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

398: height:60%;

Code With
399: Random
animation-name:slide1; Home Categories  Recent Post About Us P
400: animation-duration: 10s;
401: animation-iteration-count: infinite;
402: transition-duration:2s ;
403: }
404: .section1{
405: width:80%;
406: overflow:hidden;
407: justify-content: center;
408: align-items: center;
409: margin:0px auto;
410: }
411: .heading1{
412: opacity: 1;
413: position:relative;
414: bottom:8px;
415: }
416: .search a{
417: display:flex;
418: flex-wrap: nowrap;
419: }
420: .heading1 .ham{
421: background-color: black;
422: color:white;
423: }
424: #input{
425: width:200px;
426: flex-shrink:2;
427: }
428: header{
429: height:150px;
430: }
431: }
432: @media screen and (max-width:550px){
433: .heading ul li{
434: display:none;
435: }
436: .heading1{
437: opacity: 1;
438: bottom:8px;
439: }
440: header{
441: height:250px;
442: flex-wrap: wrap;
443: display: flex;
444: flex-direction: column;
445: }
446: #input{
447: width:150px;
448: } 
449: .close{

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 28/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

450: z-index:34;}

Code
451: With
.search a{ Random Home Categories  Recent Post About Us P
452: display:flex;
453: flex-wrap: nowrap;
454: }
455: }

Heyyy......... wait one more second ! what you said your website is not working properly
when the size of the screen is small. You can not able to open the menu list.🤔
we will solve this problem using Javascript. So, Let's move on to the Javascript portion.

Javascript codes for Responsive Ecommerce Website:-


A website with only structure and styling is like a person is sleeping (It can't
perform any functions). So for the well functioning of the website we use Javascript.

Topics you should know before implementing javascript code:-

1. DOM (Document Object Model) Manipulation.


2. Javascript basics.

So firstly we want that when we click on the menu icon shown in the below first image
then the menu list should be opened as shown in the next figure and when we click on
the close icon then again we are back to the first page as shown in the first figure.

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 29/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

The idea is clear now it's time to implement it in code.

1: const close=document.querySelector(".close");
2: const open=document.querySelector(".ham");
3: const menu=document.querySelector(".menu")
4: close.addEventListener("click",()=>{
5: menu.style.visibility="hidden";
6: })
7: open.addEventListener("click",()=>{
8: menu.style.visibility="visible";
9: })

Firstly I selected the close, ham and menu named classes using the query selector.
then use the addEventListener(a function that allows us to run functions when some
certain events are performed).

I chose the click event for both close class and ham class so when you click on the icons of
close and menu it will perform the code written inside that function which is supposed to
run.

When we click on the close icon it sets the visibility of the menu class to be hidden (this
makes the code written inside the menu class to be hidden means they are not going to
run anymore.)

While when we click on the menu icon(ham class) it sets the visibility of the menu list to
visible(so now we can see the code snippet running that is written inside the menu class).

<---------Finally, Simple and Responsive eCommerce


Website using HTML, CSS and Basics of Javascript is 

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 30/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

completed--------->
Code With Random Home Categories  Recent Post About Us P

I hope you have liked your e-commerce website Wait, Did you still not implement it
So why are you waiting, go and implement it now and enjoy your shopping😎.

If you faced any difficulty feel free to comment down your problems and If you really liked
it, please show your love in the comment section this really motivates a blogger to provide
more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.

OnePlus 9 Pro (128GB Apple iPhone 13 Pro


ROM, 8GB RAM,… Max (256GB ROM,…
₹49,999 ₹64,999 ₹1,35,990
₹1,39,900

OnePlus 9 Pro (256GB Apple iPhone 12


ROM, 12GB RAM,… (128GB ROM, 4GB…
₹54,999 ₹69,999 ₹61,990 ₹70,900

Croma

Tags clone project Ecommerce Website Html & CSS Project Project Project Ideas web developer

 Facebook  Twitter   

You might like

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 31/32
5/24/22, 12:53 PM Ecommerce Website using HTML CSS and Javascript | Simple and Responsive Ecommerce Website

Code With Random Home Categories  Recent Post About Us P

1 Comments

Nitin Kumar April 21, 2022 at 9:33 PM

Kindly upload the zipped source file instead of uploading it in codepen so that we don't
need to actually copy paste whole code for a demo.

Reply

Enter Comment

 Previous Post Next Post

About Us

Hello everyone welcome 🎉 to Code With Random blog! Code


With Random this is place for simple content with tutorial and
many other things related to like, Programming, Web
Development, iOS Development, Android Development, Projects
etc .

Copyright © 2021 CodeWithRandom All Right Reserved

Design by -Blogger Templates

https://www.codewithrandom.com/2022/01/ecommerce-website-using-html-css-and.html 32/32

You might also like