Ecommerce Website Using HTML, CSS, and JavaScript
Hello Coder, In this article, we are going to create an e-commerce website using HTML, CSS, and JavaScript with source code. This is a simple e-commerce website that has a product slider with images, a product section with a product card, and all the necessary features that e-commerce websites have.
Ecommerce Website are in high demand these days. So if you want to know how to create an E-commerce Website using HTML, CSS and JavaScript. This website is very simple and attractive. I have provided step by step tutorial and required source code. You can download those codes and use them in your work.
Hey, wait one second, you do not have your own website? Don’t feel bad; I am here to help you learn. How to build an e-commerce website, so stay connected to the blog till the end. Once you have your e-commerce website, do shopping as much as you want.
Video Tutorial Of E-commerce Website Source Code
Let’s have a look at the website’s appearance before going into the process used to create it. You can browse my elegant online store.
Live Preview Online E-commerce Website Source Code:-
After viewing my responsive e-commerce website plan, you likely already have an idea for your own website.
| Coding Language Used | Name of Coding language |
| 1 | HTML |
| 2 | CSS |
| 3 | JAVASCRIPT |
HTML CSS JavaScript E-commerce Website
The following skills are necessary for creating this webpage. They are the essential components you should possess for creating an HTML CSS e-commerce website. Here I mainly used HTML, CSS and JavaScript to create this project (E-commerce Website Using HTML, CSS, and JavaScript). First I have explained step by step and finally given the source code.
1. HTML.
2. CSS.
3. Javascript(Basics).
HTML Code For E-commerce Website
The Skelton system of the human body gives a layout to the human body. Similarly, HTML code does the same it gives the layout of the websites.
Don’t worry you don’t need any biological knowledge for this website.
Restaurant Website Using HTML and CSS
Every webpage has three main sections:-
1.Header(Navigation bar/menu/logo,etc.)
2.Main section(main content).
3. Footer.
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 make three divs. One for the logo, the second for the search bar, and the third for menu lists.
In the second class, I used the search icon I have imported through Ionicon, for any type of icon used in website development you can use it.
Gym Website Using HTML and CSS With Source Code
ADVERTISEMENT
ADVERTISEMENT
Input is a tag used for many purposes 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.
ADVERTISEMENT
<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>
</div>
</header>
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).
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.
ADVERTISEMENT
ADVERTISEMENT
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>
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 an image-slider contains images. Section 2 which contains the container class contains different items.
Use the image tag to add various images to the image slider. Add a container named “class” inside Section 2 so that it inserts things named “classes” on your website as many times as you like. Add the item name, item price, item image, and item data classes to every item. You can also add one more category if you’d like.
<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=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
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://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
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://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&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://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-id177395430"
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://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&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://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
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>
The section part is over.
Notation: Hey Are you still wondering why we assigned a class name to this tag? The correct response is that it will support you in styling it. The answer is no if you wish to style several tags with the same styling, in which case you would need to style each tag separately.
Simply giving each tag the same name will cause all tags with that name to be styled when a style is applied to one class.
Simply giving each tag the same name will cause all tags with that name to be styled when a style is applied to one class.
3. Footer:-
Footer is the last section of the website. In which add some details. The 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.
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 the code.
<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>
<—–Now, HTML code ends—->
Link Css and JavaScript File with Complete Html Code For E-commerce Website.
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.
<!DOCTYPE html>
<html lang="en">
<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=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt=""
class="img"
/>
<img
src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
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://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280"
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://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&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://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-id177395430"
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://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&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://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530"
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>
</body>
</html>
so the structure of our website is ready.
CSS Code For E-commerce Website
The structure of the website layout is completed but it doesn’t look good without styling. 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 the CSS tutorial:-
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
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).
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;
34: position:relative;
35: color:white;
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;
86:
}
87: header a ion-icon {
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;
138: animation-name:slide;
139: animation-duration: 10s;
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 {
190: padding-left:10px;
191: color:rgb(243, 168, 7);
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 {
242: color:red;
243: transform: translateY(5px);
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;
294:
}
295: @media screen and (max-width:1250px) {
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% {
346: left:-320vw;
347:
}
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%;
398: height:60%;
399: animation-name:slide1;
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 {
450: z-index:34;
}
451: .search a {
452: display:flex;
453: flex-wrap: nowrap;
454:
}
455:
}Hey, wait one more second! What you said is that your website is not working properly when the size of the screen is small. You are not able to open the menu list.
We will solve this problem using Javascript. So, let’s move on to the Javascript portion.
Responsive Navbar Design using HTML and CSS Only
JavaScript Code for E-commerce Website
A website with only structure and styling is like a person is sleeping (It can’t perform any functions). So for the 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 when we click on the menu icon shown in the 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.
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 certain events are performed).
[su_button id=”download” url=”https://drive.google.com/drive/folders/1FiU8HAuptAKgO96Nz1sYFfwiH9uGsoHh?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]
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.)
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).
Wait! What did you say? You want to learn web development with this ease. No problem, we have created the perfect E-Book for you. With this E-Book, you will master your frontend web development skills with ease. Not only that but you will get hundreds of projects with it. Here is the link to the E-Book – Master Frontend Development: Zero to Hero
I hope you have liked your E-commerce Website Code 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 to create this E-commerce Website Using HTML, CSS, and JavaScript, then, feel free to comment on 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.
This is only the frontend code of the eCommerce website?
Yes this is only frontend part code, not any backend code written for this eCommerce website project
Which code editor do you use for this eCommerce website project coding?
I personally recommend to use VS Code Studio.its very simple and easy to use
What is an E-commerce Website?
An e-commerce website is an online or digital shopping complex from which users can order different types of items from the comfort of their homes. These online shopping websites let you select clothing 24/7, from electronics to food items; all things can be delivered to their homes.
What are the benefits of an E-commerce Website?
The benefits of an E-commerce website are:
24×7 customer support
Different payment methods.
Fully return policy.
Delivery all over the world.
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.
Excellent pieces. Keep posting such kind of information on your site.
Im really impressed by your blog.
Hi there, You have performed a fantastic job. I’ll certainly digg it
and individually recommend to my friends. I am sure they will
be benefited from this website.
I truly prize your work, Great post.
Also visit my page; ZapLamp