Responsive Ecommerce Website Using HTML CSS JAVASCRIPT

Last Updated on October 1st, 2021 by Codevo

ecommerce website with html css and javascript

Before we start, I should clarify what I mean by building a responsive e-commerce website using HTML, CSS, and JAVASCRIPT.

If you are building a fully functional ecommerce website, you will have to build the frontend with a framework that looks more presentable in the eyes of the users and also a backend that will be communicating with a database.

The picture am trying to paint is that a complete ecommerce website can't be built with only HTML, CSS, and JAVASCRIPT. You will need to save users data in a database which will also require a backend.

In this blog, I will try my best to help you build an ecommerce template with HTML, CSS and JAVASCRIPT step by step.

You can later convert this template to any frontend framework you know like REACTJS, ANGULARJS or VUEJS and also connect it to a backend like NODEJS, PHP, PYTHON etc.

Features of an Ecommerce Website:

SEO Friendly website
Chat Widget for Messaging
Responsive on all devices
Product Navigation
Search Box
Product Cart
Payment Methods
Security

Things Needed(Plugins):

Glide.js https://glidejs.com/
Google Fonts https://fonts.google.com/
Fontawesome Icons https://fontawesome.com/

Basic Setup:

Create a new directory and give it a name of your choice. In that directory create an image folder. Download the images and unzip the file.

Now copy the downloaded images and paste them into the images folder you created.

Now open your project with any text editor of your choice, in this article I will be using VISUAL STUDIO CODE. You can use any text editor since the final result is the same regardless of what text editor you use.

I went for this approach because we are not going to build a backend for fetching data. If you are getting confuse I created this YouTube video to guide you through every step.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap" rel="stylesheet" />

  <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />


  <!-- Carousel -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.theme.min.css
">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

  <!-- Custom StyleSheet -->
  <link rel="stylesheet" href="styles.css" />

  <title>Phone Shop</title>
</head>

<body>
    <!-- Glide Carousel Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js"></script>
  <!-- Animate On Scroll -->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

  <!-- Custom JavaScript -->
  <script src="./js/products.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/slider.js"></script>

</body>

</html>

index.html

It's now time to add some styling with CSS so create a new CSS folder in the root directory and create a new file in the CSS folder with the name styles.css Remember you've to create a file with a .css extension.

styles.css

/*
======================
Reset
======================
*/
:root {
  --primaryColor: #f1f1f1;
  --black: #222;
  --black2: #555;
  --black3: #252525;
  --black4: #000;
  --black5: #212529;
  --orange: #eb0028;
  --white: #fff;
  --grey: #959595;
  --grey2: #666;
  --grey3: #ccc;
  --secondaryColor: #2b1f4d;
  --yellow: #ffcc00;
  --green: #59b210;
  --blue: rgb(56, 10, 223);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body,
input {
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "Archivo", sans-serif;
  color: var(--black);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

h3,
h4 {
  font-weight: 500;
}

/*
======================
Header
======================
*/

.header {
  position: relative;
}

.container {
  max-width: 117rem;
  margin: 0 auto;
  padding: 0 1.6rem;
}

styles.css

If you face errors/problems while copying and pasting the various code snippets then download the source code from the button below.

Github link

Download Code Files

15 COMMENTS

mazharOctober 20th, 2021

Thank you sir

Alex!August 3rd, 2021

Thanks for your help!

HakiJuly 1st, 2021

Thanks You are the best no comment

sahilAugust 10th, 2021

Nice Concept Thanks You

Asilbek AtojonovNovember 5th, 2021

please, create admin panel with html css js and php

Md IbrahimAugust 18th, 2021

Thank for the best.

NaffJuly 16th, 2021

Thanks, One of the best.

Phix ugJuly 6th, 2021

Thanks for your help

eurekaSeptember 3rd, 2021

thanks you

Naveed KhanOctober 24th, 2021

Thanks For Give Us source Code

Lewis MWJuly 30th, 2021

you are the best

vivaan jainJune 30th, 2021

nice

Prakash Kumar SinghAugust 11th, 2021

Pls remove this "reach to top" bar , its hindering the styling of other sections on this website

SANASINH BOUNTHONEAugust 13th, 2021

I think it is very good one and I will try to use for studying

CozmaTJuly 6th, 2021

Very nice template. Excellent job. I have an issue on my copy, doesn't pull any icon from font awesome. Can you, please, explain why? Thank you

Responsive Ecommerce Website Using HTML CSS JAVASCRIPT

Features of an Ecommerce Website:

Things Needed(Plugins):

Basic Setup:

index.html

styles.css

15 COMMENTS

LEAVE A REPLY