LC16- Ecommerce Website with HTML, CSS and JAVASCRIPT TEMPLATE

Last Updated on October 1st, 2021 by Codevo
Ecommerce Website with HTML, CSS and JAVASCRIPT TEMPLATE

Hello readers, Today in this article you will learn how to build a complete ecommerce website with HTML CSS and javascript from scratch step by step.

In my previous article, we built a shopping cart with javascript.

If you haven't checked it then do so because we used new tools in javascript to build the shopping cart functionality.

Now, in this article we are going to build a complete ecommerce website with HTML CSS and javascript.

If you haven't created any website before with code before don't panic because am going to guide you step by step so that you also get the same result as mine.

Real quick, you can also convert this ecommerce website template to a dynamic ecommerce website using React, NodeJs and MongoDB. You can check out this video for an intro.

Features of this ecommerce Website

  • Responsive Navigation Bar with toggle effect
  • Responsive Carousel with Swiperjs
  • Collection Section
  • Featured Section
  • New Products Section
  • Product Details Page
  • All Products Page
  • Cart Page
  • Footer

Resources

  1. Fontawesome
  2. CDNjs
  3. SwiperJS
  4. Boxicons

Setup File

Download setup file here

Video Of Ecommerce Website

In the video, you’ve seen the Complete Responsive Ecommerce Website and I hope you’ve understood the chunks of codes of this ecommerce design.

I tried my best to make this video understandable for beginners and also I showed every output of the code in the video.

If this video has been helpful for you, don’t forget to like, subscribe and leave a comment.

If you couldn't follow along in the video or maybe it was a little confusing then scroll to the bottom of this article where you will find a download button.

Click on the download button and wait for 60s while the download link if been prepared for you. When the link is ready click on it to automatically download the zip file.

Unzip the downloaded file and wala you have the full source code.

Also, if you like this design and would what to use it in your next project then feel free to modify it in your own ways.

You might Like this:

  1. Responsive Portfolio Website
  2. Responsive Ecommerce Website
  3. Website with Video Background

Setup files for ecommerce website

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link rel="shortcut icon" href="./images/favicon.png" type="image/png" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<!-- ======== Swiper Js ======= -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.css"
/>
<!-- Boxicons -->
<link href='https://unpkg.com/boxicons@2.0.8/css/boxicons.min.css' rel='stylesheet'>
<!-- Custom StyleSheet -->
<link rel="stylesheet" href="./styles.css" />
<title>Codevo - Ecommerce Website</title>
</head>
<body>
<!-- ======== SwiperJS ======= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.5/swiper-bundle.min.js"></script>
<!-- Custom Scripts -->
<script src="./js/slider.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
index.html

css

:root {
--primary: #69ae14;
--white: #fff;
--black: #222;
--grey1: #3a3b3c;
--grey2: #828282;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 1.6rem;
background-color: var(--white);
color: var(--black);
font-weight: 400;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 600;
}
a {
text-decoration: none;
color: inherit;
}
li {
list-style: none;
}
.container {
max-width: 114rem;
margin: 0 auto;
}
@media (max-width: 1200px) {
.container {
padding: 0 3rem;
}
}
@media (max-width: 768px) {
.container {
max-width: 60rem;
}
}
.d-flex {
display: flex;
align-items: center;
}
styles.css

Github link

Download Code Files

2 COMMENTS

avator
Anand GautamJuly 26th, 2021

Nice project...

avator
ashirAugust 24th, 2021

this website is helping for me

LEAVE A REPLY