Hello friends, in today’s blog we will learn how to make an e-commerce website using HTML, CSS and Javascript. While making a website you have to keep in mind some important things like correct use of HTML tags which will help your website in ranking on Google. header tag within body tag, its nav tag then aside, main, article, figure, p, section and finally footer tag. So I am giving you a picture below in which it has been given how to use the tags.
So let’s move towards building our own e-commerce website. So first of all you have to create an html file in a vs code and link it with the css and javascript. For linking the css you have to use <link rel=”stylesheet” href=”style.css”> this code in the head and for linking the js you have to use <script src=”app.js”></script> in the body. Actually you can add both css and js in the html itself but this will not be a good practice. So you have to create separate files and link them.
Step :01 – Creating a HTML file
First, we will link the icons using the link tag
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./ecommerce.css">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
</head>
After that we will create an unrequested list in which we will create a number by giving pages like home, contact and about etc.
<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>
Then you have to use the input tag for the search bar which will help you in finding the product.
<div class="search">
<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
And here is the rest of the HTML code, you will have to practice so that these codes will become easy for you.
<head>
<link rel="stylesheet" href="style.css">
<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="#">ShopKaro</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/298863/pexels-photo-298863.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="img">
<img src="https://images.pexels.com/photos/19531051/pexels-photo-19531051/free-photo-of-elegant-blazer-on-mannequin.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="img">
<img src="https://images.pexels.com/photos/3925956/pexels-photo-3925956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="img">
<img src="https://images.pexels.com/photos/7679656/pexels-photo-7679656.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" class="img">
<img src="https://images.pexels.com/photos/8306384/pexels-photo-8306384.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=2&h=650&w=940" 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&dpr=1&w=500" 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://images.pexels.com/photos/52518/jeans-pants-blue-shop-52518.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=2&h=650&w=940" 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&dpr=2&h=650&w=940" 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&dpr=2&h=650&w=940" 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&dpr=1&w=500" 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://images.pexels.com/photos/2337796/pexels-photo-2337796.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=1&w=500" 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&dpr=1&w=500" 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://images.pexels.com/photos/211761/pexels-photo-211761.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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://images.pexels.com/photos/6205737/pexels-photo-6205737.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=1&w=500" 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://images.pexels.com/photos/16592625/pexels-photo-16592625/free-photo-of-air-conditioner-in-a-house.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=2&h=650&w=940" 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&dpr=2&h=650&w=940" 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://images.pexels.com/photos/730055/pexels-photo-730055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 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&dpr=2&h=650&w=940" 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>
<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>
<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>
</div>
<div class="footer3">Copyright © <h4>ShoPperZ</h4> 2021-2028</div>
</footer>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="./ecommerce.js"></script>
<script src="script.js"></script>
</body>
</html>
Step :02 – Adding CSS
With the help of CSS we design HTML in a way that the user interface looks good. We give a class or ID to the tags in HTML. Using which we can apply CSS to that specific tag. Remember that we can create many classes for the same name but we can give only one ID.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 60px;
width: 100%;
background: black;
}
.heading ul {
display: flex;
}
.logo a {
color: white;
transition-duration: 1s;
font-weight: 800;
}
.logo a:hover {
color: rgb(240, 197, 6);
transition-duration: 1s;
}
.heading ul li {
list-style: none;
}
.heading ul li a {
margin: 5px;
text-decoration: none;
color: black;
font-weight: 500;
position: relative;
color: white;
margin: 2px 14px;
font-size: 18px;
transition-duration: 1s;
}
.heading ul li a:active {
color: red;
}
.heading ul li a:hover {
color: rgb(243, 168, 7);
transition-duration: 1s;
}
.heading ul li a::before {
content: "";
height: 2px;
width: 0px;
position: absolute;
left: 0;
bottom: 0;
background-color: white;
transition-duration: 1s;
}
.heading ul li a:hover::before {
width: 100%;
transition-duration: 1s;
background-color: rgb(243, 168, 7);
}
#input {
height: 30px;
width: 300px;
text-decoration: none;
border: 0px;
padding: 5px;
}
.logo a {
color: white;
font-size: 35px;
font-weight: 500;
text-decoration: none;
}
ion-icon {
width: 30px;
height: 30px;
background-color: white;
color: black;
}
ion-icon:hover {
cursor: pointer;
}
.search a {
display: flex;
}
header a ion-icon {
position: relative;
right: 3px;
}
.img-slider img {
height: 720px;
width: 1080px;
}
@keyframes slide {
0% {
left: 0px;
}
15% {
left: 0px;
}
20% {
left: -1080px;
}
32% {
left: -1080px;
}
35% {
left: -2160px;
}
47% {
left: -2160px;
}
50% {
left: -3240px;
}
63% {
left: -3240px;
}
66% {
left: -4320px;
}
79% {
left: -4320px;
}
82% {
left: -5400px;
}
100% {
left: 0px;
}
}
.img-slider {
display: flex;
float: left;
position: relative;
width: 1080px;
height: 720px;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: infinite;
transition-duration: 2s;
}
.heading1 {
opacity: 0;
}
.search {
display: flex;
position: relative;
}
.section1 {
width: 1080px;
overflow: hidden;
justify-content: center;
align-items: center;
margin: 0px auto;
}
.section2 .container {
display: flex;
width: 100%;
height: max-content;
flex-wrap: wrap;
justify-content: center;
margin: 10px auto;
}
.section2 .container .items {
margin: 10px;
width: 200px;
height: 300px;
background-color: white;
border: 2.5px solid black;
border-radius: 12px;
}
.section2 .container .items .name {
text-align: center;
background-color: rgb(240, 197, 6);
height: 25px;
padding-top: 4px;
color: white;
margin: 0;
}
.section2 .container .items .price {
float: left;
padding-left: 10px;
display: block;
width: 100%;
color: rgb(255, 0, 0);
font-weight: 650;
}
.section2 .container .items .info {
padding-left: 10px;
color: rgb(243, 168, 7);
}
.section2 .container .items .img img {
width: 200px;
height: 200px;
margin: 0;
padding: 0;
border-radius: 12px;
transition-duration: 0.8s;
}
.section2 .container .items .img {
overflow: hidden;
margin: 0;
}
.section2 .container .items:hover .img img {
transform: scale(1.2);
transition-duration: 0.8s;
border-radius: 12px;
}
footer {
display: flex;
flex-direction: column;
background-color: black;
align-items: center;
color: white;
}
.footer1 {
display: flex;
flex-direction: column;
align-items: center;
color: white;
margin-top: 15px;
}
.social-media {
display: flex;
justify-content: center;
color: white;
flex-wrap: wrap;
}
.social-media a {
color: white;
margin: 20px;
border-radius: 5px;
margin-top: 10px;
color: white;
}
.social-media a ion-icon {
color: white;
background-color: black;
}
.social-media a:hover ion-icon {
color: red;
transform: translateY(5px);
}
.footer2 {
display: flex;
width: 100%;
justify-content: space-evenly;
align-items: center;
text-decoration: none;
flex-wrap: wrap;
}
.footer0 {
font-weight: 1200;
transition-duration: 1s;
}
.footer0:hover {
color: rgb(243, 168, 7);
}
.footer2 .heading {
font-weight: 900;
font-size: 18px;
}
.footer3 {
margin-top: 60px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footer2 .heading:hover {
color: rgb(243, 168, 7);
}
.footer2 .div:hover {
transform: scale(1.05);
}
.footer3 h4 {
margin: 0 10px;
}
.footer2 div {
margin: 10px;
}
.menu {
visibility: hidden;
}
.heading1 .ham:active {
color: red;
}
.items {
overflow: hidden;
}
.ham,
.close {
cursor: pointer;
}
@media screen and (max-width: 1250px) {
.heading ul li {
display: none;
}
.items {
transform: scale(0.9);
}
.img-slider img {
height: 60vw;
width: 80vw;
}
.ham:active {
color: red;
}
.menu {
display: flex;
flex-direction: column;
align-items: center;
}
.menu a ion-icon {
position: absolute;
}
@keyframes slide1 {
0% {
left: 0vw;
}
15% {
left: 0vw;
}
20% {
left: -80vw;
}
32% {
left: -80vw;
}
35% {
left: -160vw;
}
47% {
left: -160vw;
}
50% {
left: -240vw;
}
63% {
left: -240vw;
}
66% {
left: -320vw;
}
79% {
left: -320vw;
}
82% {
left: -400vw;
}
100% {
left: 0vw;
}
}
.menu ul {
display: flex;
flex-direction: column;
position: absolute;
width: 100vw;
height: 100vh;
background-color: black;
left: 0;
top: 0;
z-index: 11;
align-items: center;
justify-content: center;
opacity: 1;
}
.close {
z-index: 34;
color: white;
background-color: black;
}
.close:active {
color: red;
}
.menu ul li {
list-style: none;
margin: 20px;
border-top: 3px solid white;
width: 80%;
text-align: center;
padding-top: 10px;
}
.menu ul li a {
text-decoration: none;
padding-top: 10px;
color: white;
font-weight: 900;
}
.menu ul li a:hover {
color: rgb(240, 197, 6);
}
.img-slider {
display: flex;
float: left;
position: relative;
width: 80%;
height: 60%;
animation-name: slide1;
animation-duration: 10s;
animation-iteration-count: infinite;
transition-duration: 2s;
}
.section1 {
width: 80%;
overflow: hidden;
justify-content: center;
align-items: center;
margin: 0px auto;
}
.heading1 {
opacity: 1;
position: relative;
bottom: 8px;
}
.search a {
display: flex;
flex-wrap: nowrap;
}
.heading1 .ham {
background-color: black;
color: white;
}
#input {
width: 200px;
flex-shrink: 2;
}
header {
height: 150px;
}
}
@media screen and (max-width: 550px) {
.heading ul li {
display: none;
}
.heading1 {
opacity: 1;
bottom: 8px;
}
header {
height: 250px;
flex-wrap: wrap;
display: flex;
flex-direction: column;
}
#input {
width: 150px;
}
.close {
z-index: 34;
}
.search a {
display: flex;
flex-wrap: nowrap;
}
}
Step :03 – Adding JavaScript
We use JavaScript to add functions to the website. But it is more difficult than HTML and CSS.
const close = document.querySelector(".close");
const open = document.querySelector(".ham");
const menu = document.querySelector(".menu");
close.addEventListener("click", () => {
menu.style.visibility = "hidden";
});
open.addEventListener("click", () => {
menu.style.visibility = "visible";
});
Final Output :-
Download Ebooks – Click Me
Download Notes – Click Me
