E-commerce Website Using HTML, CSS and JavaScript
Hello Coder, In this Article we are Going to create 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 Product Card, and all the necessary features that E-commerce websites have.
Dear Coders: Let’s explore how to create an E-commerce website source code using HTML, CSS, and JavaScript. We use HTML code to build the foundation of an e-commerce website, and CSS code to style it. Every code is discussed in depth. Next, we leverage certain functionality from an e-commerce website, and to do this, we write JavaScript code.
It’s time to move to your e-commerce website if you’re becoming tired of buying on Amazon, Flipkart, or any other e-commerce website and want to try something different.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
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 at the end, you have your e-commerce website then do shopping as so 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:- Here you can check it.
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 |
Ecommerce Website Code
The following skills are necessary for creating this webpage. They are the essential components you should possess for creating an e-commerce website:
1. HTML.
2. CSS.
3. Javascript(Basics).
HTML Code For E-commerce Website:-
The 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 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. In the header section, firstly made three divs. One for the logo, the second for the search bar, and the third for menu lists.
ADVERTISEMENT
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.
ADVERTISEMENT
ADVERTISEMENT
Gym Website Using HTML and CSS With Source Code
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.
<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>
<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>
2. Section:-
<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>
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> <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>
Link Css and JavaScript File with Complete Html Code For E-commerce Website.
<!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>
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).
1. Firstly style the header. Use the Flex property to align every flex item in the header in a line.
then use the same for the search menu and heading lists as flexbox. then align them in a horizontal line using properties.
2. set the visibility of the menu class and heading class to be hidden because it should appear when the size of the screen is less. (when we are using it on phones or tab).
3. Apply other properties and hover effects(the 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 it 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 the 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 the 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; 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: }
Heyyy……… wait one more second! what you said is 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.
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 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.
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.
<———Finally, a Simple and Responsive E-commerce website using HTML, CSS, and the Basics of Javascript is completed———>
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
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