🔥 How to make ecommerce website with HTML, CSS and JS only
Tags: html, css, javascript, webdev
Published: 2021-12-21 13:33:16

If you are a beginner or a pro. This article is for everyone who want to make his/her CSS animations on outstanding level. If you want to amaze people with your CSS skills, you must read this article. In this, you’ll learn to create smooth animations to navigate through product lists. You’ll create the design using flex box first and then use different classes to add animations to the element. You’ll also use JS in making this. In total, this will be a lot fun to create.

So, without wasting more time, let's start. To see project demo or for better understanding of code, you can watch the tutorial below.

#Video Tutorial

{% youtube UpRvHfdPi4c %}

> I appreciate if you can support me by subscribing my youtube channel. 

[ Source Code ](https://www.patreon.com/posts/60169583)

#Code

So, before starting you should know our folder structure. 

![Modern Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q5vx2xpm2kgnykmnwm4.png)

[Download Images](https://drive.google.com/drive/folders/17w547j2VL5kFo48T_2IDWY51dU4gsMpj?usp=sharing) from here.

So, okay. Let's start coding.

###Left side.

Hmm! So shall we start with left side of our header. To make that first write HTML basic template, give it a title, along with that link `style.css` and `app.js` file to it. Once you are done with all of that. Code this inside `body` tag.

```HTML
<div class="left-side">
    <span class="logo">fashion</span>
    <div class="sm-product">
        <h1 class="product-index">01</h1>
        <div class="sm-product-img-container">
            <img src="img/img1.jpg" class="sm-product-img" alt="">
        </div>
        <p class="sm-product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut mollitia adipisci aspernatur</p>
    </div>
    <div class="social-link">
        <img src="img/facebook.png" class="social-link-img" alt="">
        <img src="img/instagram.png" class="social-link-img" alt="">
    </div>
</div>
```
Well, we have to use some CSS to make this look like the goad design. So, let's style it.

```CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto', sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
}

.left-side{
    width: 15vw;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
}

.logo{
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2vw;
    position: absolute;
    top: 4vw;
    left: -1.5vw;
    transform: rotate(-90deg);
    user-select: none;
}

.sm-product{
    width: 100%;
    height: auto;
}

.product-index{
    font-size: 2vw;
    text-align: center;
}

.sm-product-img-container{
    position: relative;
    margin: .5vw 0;
    height: 15vw;
    overflow: hidden;
}

.sm-product-img{
    width: 100%;
    height: 15vw;
    object-fit: cover;
}

.sm-product-des{
    text-align: right;
    padding: 0 .5vw;
    line-height: 1.5vw;
    font-size: 1vw;
    color: rgba(0, 0, 0, 0.5);
}

.social-link{
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.social-link-img{
    width: 1.6vw;
    height: 1.6vw;
    margin: .5vw;
    cursor: pointer;
}
```
######Output
![Modern Header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76gx47lyuq6kyxfbkdsv.png)

Hmm! Isn't it looking awesome. I really loved it. Okay, let's move on to right side now.

###Right Side

Oh! so we have to make the right side. Hmmm! to make it. code this HTML after `left-side` element. " **For better explanation please watch the video tutorial** "

```HTML
<div class="right-side">
    <img src="img/img1.jpg" class="backdrop-img" alt="">
    <div class="content">
        <div class="product-detail">
            <h1 class="product-name">yellow tracksuit</h1>
            <p class="product-des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore sunt assumenda doloribus, fugiat provident nemo.</p>
            <a href="#" class="buy-btn">buy now</a>
            <button class="nxt-btn"><img src="img/arrow.png" alt=""></button>
        </div>
        <div class="product-img-container">
            <img src="img/img1.jpg" class="product-img" alt="">
        </div>
    </div>
</div>
```
Again we have style this, but before that add `Roboto` and `Sirin Stencil` google font inside `head` tag.

```HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Sirin+Stencil&display=swap" rel="stylesheet">
```
Okay, we can style the `right-side`.

```CSS
.right-side{
    width: 85vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backdrop-img{
    width: 25vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    object-fit: cover;
    filter: blur(.5vw);
    user-select: none;
}

.content{
    width: 80%;
    display: flex;
    align-items: center;
    position: relative;
}

.product-detail{
    width: 60%;
}

.product-name{
    font-size: 8vw;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    font-family: 'Sirin Stencil', cursive;
    font-weight: 300;
    line-height: 9vw;
}

.product-des{
    margin: 4vw 0;
    width: 90%;
    font-size: 1.2vw;
    line-height: 2vw;
    color: rgba(0, 0, 0, 0.5);
}

.buy-btn{
    text-decoration: none;
    color: #000;
    text-transform: capitalize;
    font-size: 1.2vw;
}

.nxt-btn{
    border: none;
    background: none;
    display: flex;
    margin-left: auto;
    margin-top: -1.2vw;
    margin-right: 1vw;
    cursor: pointer;
    justify-content: center;
    user-select: none;
}

.nxt-btn img{
    width: 60%;
}

.product-img-container{
    width: 40%;
    height: 40vw;
    position: relative;
    overflow: hidden;
}

.product-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
```
######Output
![Modern header](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzcsqi48kflvo8psteo8.png)
 
Okay. So we are done with the styles. And I guess we have more than 50% done. So, why wasting time, let's create animations now.

###Animations

So, in our site or section, we have 3 animations.
1. Fade animation - which plays on load. 
2. Black div Slide animation - which plays when changing the product.
3. Fade animation - which plays when changing the product.

Okay, let's start. at the very top. Create this `overlay` element.

```HTML
<div class="overlay"></div>
```
This overlay element, will be on top of all the element with "white" background. And its slowly fade out on loading.

```CSS
.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    opacity: 1;
    z-index: 9;
    animation: fade-out 2s forwards 1;
    pointer-events: none;
}

@keyframes fade-out{
    to{ opacity: 0 }
}
```
I hope this will make it work. Fir black div slide animation, we need `slide` class. We'll toggle this class from JS. So use this class to make a `::before` element.

```CSS
.slide::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #000;
    animation: slide-left 1s linear 1;
}

@keyframes slide-left{
    to{ left: 100% }
}
```
Okay so, this will make that animation but its important we only have to add this slide class to these 2 element.

```HTML
<div class="sm-product-img-container slide">

///

<div class="product-img-container slide">
```
You can check the animation for now by just manually adding `slide` class to above element. But after done with checks, make sure to remove the `slide` class.

And the last, fade effect. Again for this we'll use `fade` class and toggle this with JS
```CSS
.fade{
    pointer-events: none;
    animation: fade 1s forwards 1;
}

@keyframes fade{
    0%, 100% { opacity: 1 }
    45%, 60% { opacity: 0 }
}
```
We have a little break in the animation because changing text takes some time, and we don't want to see change process.

###App.js

Great work so far. Now, we just have to toggle all the classes from JS and change the products. So before start, I'll recommend you download the `app.js` from the above `download images` link. In that file, you'll find a `productData` array. This array contains the data related to our product.

Okay so, let's start by selecting all the elements in JS first.

```JS
const nxtBtn = document.querySelector('.nxt-btn');

let smImgContainer = document.querySelector('.sm-product-img-container');
let smImg = document.querySelector('.sm-product-img');
let productIndex = document.querySelector('.product-index');
let smProductDes = document.querySelector('.sm-product-des');

let productImgContainer = document.querySelector('.product-img-container');
let productImg = document.querySelector('.product-img');
let backdropImg = document.querySelector('.backdrop-img');

let productDetail = document.querySelector('.product-detail');
let productName = document.querySelector('.product-name');
let productDes = document.querySelector('.product-des');

let currentProduct = 0;
```
Thats a lot of elements. Isn't it. `currentProduct` variable will track the current product while use navigate through them.

Now add click event to `nxtBtn`

```JS
nxtBtn.addEventListener('click', () => {

    if(currentProduct >= productData.length - 1){
        currentProduct = 0;
    } else{
        currentProduct++;
    }

    productIndex.innerHTML = productData[currentProduct].index;
    smProductDes.innerHTML = productData[currentProduct].des.slice(0, 80);

    smImgContainer.classList.add('slide');
    productImgContainer.classList.add('slide');
    backdropImg.classList.add('fade');
    productDetail.classList.add('fade');

    setTimeout(() => { // in the mid of animation, changing the contents
        productName.innerHTML = productData[currentProduct].name;
        productDes.innerHTML = productData[currentProduct].des;
        smImg.src = productImg.src = backdropImg.src = `img/${productData[currentProduct].image}`;
    }, 500);

    setTimeout(() => { // removing all animation classes
        smImgContainer.classList.remove('slide');
        productImgContainer.classList.remove('slide');
        backdropImg.classList.remove('fade');
        productDetail.classList.remove('fade');
    }, 1000);

})
```
The above code is very simple, at first `if/else` condition checking for `currentProduct` to change its value. after that I am setting the element's innerHTMl and adding animations classes to them. By using `setTimeout` I am changing the content after `500ms` and removing the animation classes after `1000ms`.

So, that's it. Great work guys. We are done with the header. 

I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

#Articles you may find Useful

1. [Best CSS Effect](https://dev.to/kunaal438/css-the-best-css-effects-of-all-time-most-underrated-web-ux-2chj)
2. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
3. [Disney+ Clone](https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-beginner-in-2021-html-css-js-m3p)
4. [Youtube API - Youtube Clone](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)
5. [TMDB - Netflix Clone](https://dev.to/kunaal438/how-to-create-netflix-clone-netflix-clone-with-hmtl-css-js-989)

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

By the way, from Jan 2022 I am starting a CSS advance topic series on my youtube channel where I'll teach about CSS flex box/grid/positions and all other concepts. I'll teach you to create how to breakdown any complex web design. At the end of each video, I'll also give you 1-2 web design to code yourself. And you can then submit you creating on my instagram. I am sure after the series you can code any web design like me. So, if you are interested make sure to subscribe my channel 😉

<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeitpawvax07cx7r9yoa.png"></a>

[Source Code](https://www.patreon.com/posts/60169583)
Thanks for reading