Lens

Posted on Feb 4, 2023

How to make a small Ecommerce Shoe store

#webdev #tutorial #css #javascript

Introduction

In this blog you'll learn how i made this small Ecommerce shoe store website with HTML, CSS, and Javacript. We'll mostly go over how we made the nav menu, carousels, and footer. If you want to view the website click here! or look at the codepen below.

Nav menu
Winter sale
Shoe menu
Shoe carousels
Sports gear
footer

Nav menu

Create a nav element containing multiple paragraph elements, a div for the profile picture, and a cart icon (from Ionicons)
Make the nav horizontal using flex, space the elements in it evenly with justify-content: space-evenly.
Give the text in the nav a better font (ex: Roboto), and give the nav a specefic height to space out the top and bottom.
Give some of the letters of the first element a span element, then style the span to be bold and blue.
Make the pfp div round by giving it a border-radius of 50%, then give it a background-image.

HTML

<nav>
<p><span class="logo_text">S</span>ole<span class="logo_text">S</span>urf</p>
<p>Home</p>
<p>Deals</p>
<p>Sports</p>
<p>Shoes</p>
<div class="pfp"></div>
<ion-icon class="cart" name="cart-outline"></ion-icon>
</nav>

CSS

nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-evenly;
  font-family: 'Roboto';
}

nav > p {
  cursor: pointer;
}
/*When you hover on of them, they'll turn blue*/
nav > p:hover {
  color: cadetblue;
}

/*Making the profile picture*/
.pfp {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url("/.image_link");
  background-size: cover;
  transition: 0.5s;
}

/*Sizing the cart icon*/
.cart {
  font-size: 25px;
  cursor: pointer;
}

/*Customizing the span elements for the logo*/
.logo_text {
  text-decoration: none;
  font-weight: bold;
  color: #3a86ff;
}

Winter Sale section

Make a section element with a height of div and an image
- In the div is an h1 and p element
Give the section a height of 45rem and a background gradient, then give the font text of it Poppins
Make the section use flex to align its content to the center and space them evenly
Give the image a width of 200px and a border radius 0f 10px
Give the div a width of 40% so it can be more viewable

HTML

<section class="winterSale"> <a name="winter"></a>
<div>
<h1>Save 50% off of winter cloting with our winter sale!</h1>
<p>The air is getting cold, so we decided to give you a chance to warm yourself up</p>
</div>
<img src="https://images.unsplash.com/photo-1532188928985-825ecd8720b7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</section>

CSS

/*Stylizing the section*/
.winterSale {
  background: linear-gradient(#8EC5FC, #E0C3FC);
  height: 25rem;
  font-family: 'Poppins';
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
/*Styling the image*/
.winterSale > img {
  width: 200px;
  border-radius: 10px;
}
/*Styling the div*/
.winterSale > div {
  width: 40%;
}

Shoe menu

Make a section with a height of 40rem and a background-color of black. In it is an h1 element and a div element. Make it display grid to use place-items: center to place its content at the center.
In the div, make three other divs inside with a called shoe_type. They'll have a width of 120px and a height of 180px.
make the div containing the shoe_types display grid to seperate the shoe_types into three columns using grid-template-columns: repeat(3, 1fr)
Give the shoe_types a hover effect where their white borders appear, give the shoe_types a transition duration to make the effect smoother
Give each shoe_type a background image and a before element. The before element will be placed under them with a relative position.
Give each shoe_type before psuedo-element a specefic name.

HTML

<section class="shoe-grid">
<h1 style="color: white; font-size: 80px;font-family: Poppins;">Shoes</h1>
<div class="grid_container">
<div class="shoe_type"></div>
<div class="shoe_type"></div>
<div class="shoe_type"></div>
</div>
</section>

CSS

/*Styling the section and centering its content*/
.shoe-menu {
  height: 40rem;
  display: grid;
  place-items: center;
  background-color: black;
}
/*Spacing out the shoe types evenly*/
.grid_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
}
/*Styling the shoe types*/
.shoe_type {
  width: 120px;
  height: 180px;
  background-color: green;
  color: white;
  transition: 0.3s ease-out;
}
/*Giving each shoe type a background image*/
.shoe_type:nth-child(1) {
  background-size: cover;
background-image: url("https://images.unsplash.com/photo-1586882829491-b81178aa622e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
}

.shoe_type:nth-child(2) {
  background-image: url("https://images.unsplash.com/photo-1596908181039-caa23a9eb6d6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80");
  background-size: cover;
}

.shoe_type:nth-child(3) {
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80");
}
/*Giving the shoe types a caption*/
.shoe_type::after {
  font-family: 'Poppins';
  position: relative;
  top: 12rem;
  left: 38px;
}

Shoe carousels

How it works: The visible items div is what contains our actual carousel, wich is the item_container. When we click on one of the buttons the item_container goes left or right. We give the visible_items an overflow of hidden then make the width lower than the item_container's width to make it a carousel.

Creating and styling the carousels

Make a section that has three carousel divs
- In each carousel is two icons (those will be our forward and back button), a header, and a div called called visible items.
- In the visible items div is a div that's the item_container, it contains all the shoe items.
Give each carousel a height of 30rem and a width of 100%. After that give the visible_item div a height of 100% so its almost the same size as its parent element
Give the item_container a height of 100% but a width of 200% to make it bigger that visible_item's. Make it display flex and to code align-items: flex-start and justify-content: space-around to make sure all of the items can be seen when clicking on the carousl buttons . Finally give it a gap of 5% to space each item out.

HTML

<section class="buy">
<div class="carousel">
<ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
<h1>Poular Shoes</h1>
<div class="visible_items">
<div class="item_container">
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</div>
</div>
<ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
</div>
<!--There are three other carousels, but
i'll only show you one so the code isn't too
long-->

CSS

.carousel {
  width: 100%;
  margin: 0;
  height: 30rem;
}

.visible_items {
  height: 100%;
  overflow: hidden;
}

.item_container {
  width: 200%;
  height: 100%;
/*The transiton will be for when a button
is clicked*/
  transition: 0.5s;
  display: flex;
  gap: 5%;
  justify-content: space-around;
 align-items: flex-start;
  overflow: hidden;
}

Styling the buttons

Give the buttons (ionicons) a background color of cyan and and a border-radius of 50% to make them look like a circular button.
Set the buttons positons to relative and position them to the side of the carousels
Give them a high index so they can stay on top of the carousels.

CSS

.button-forward {   
  position: relative;   
  left: 95%;   
  bottom: 360px;   
  z-index: 2;   
}   

.button-back {   
  position: relative;   
  top: 192px;   
  left: 10px;
  z-index: 2;   
}

Styling the shoe items

Give the items a width of 500px and a height of 200px with a border-radius of 5px to make it a rectangle.
Give each item their own background-image
Position their before and after psuedo-elements under them, with the before psuedo being bolder.
- the before psuedo will be the name of the shoe and the after psuedo will be the price, so the after pseudo is under the before pseudo.
Give each item a cusom before psuedo name and after psuedo price

.items {
  width:  500px;
  height: 200px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-family: 'Montserrat';
}

.items:before {
position: relative;
top: 195px;
font-family: 'Poppins';
font-weight: 700;
}

.items:after {
  position: relative;
  top: 150px;
  right: 20px;
}

/*This is just one example of an 
item having it's own background-image, name, and price*/

.items:nth-child(1) {
  background-size: cover;
  background-image: url("https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
}

.items:nth-child(1):before {
  content: 'Red Nikes';
}

.items:nth-child(1):after {
  content: '$14.99';
}

After all this css your carousel should look like this (on a pc):

Javascript for carousels

Put an item_container and all the carousels in a variable.
Give each carousel a function where when a the forward button is clicked, the item container translates to the right, and when the back button is clicked it'll translate to the left.

var itemContainer = document.querySelector('.item_container')

// get all carousels in the page
const carousels = document.body.querySelectorAll(".carousel");

// scan each carousel and assign events to children
carousels.forEach((carousel) => {
  // get item_container
  const itemContainer = carousel.querySelector(".item_container");
  // assign event to button-back

  carousel.querySelector(".button-back").addEventListener('click', () => {
    itemContainer.style.transform = 'translateX(10%)';
  });
  // assign event to button-forward
  carousel.querySelector(".button-forward").addEventListener('click', () => {
    itemContainer.style.transform = 'translateX(-40%)';
  });
});

Now whenever we click on a button the carousel moves left and right!

Spring gear

Make a sport section with a height of 25rem and a background image of a feild
In the section is two div's, one being the description and the other being the sports
Give the section flex so it can align the items to the center and space them evenly
Give the button in the description a hover transition where it goes from transparent and white to a white background and black text
Make the div containing the sports display grid to make two columns that have two sports each
Give each sport a background image and a hover effect where when its hovered the background will have a backgdrop-filter that sets the opacity to 0 and the name of the sport will be seen.

HTML

<section class="sports">
<div class="sports_text">
<h1>Gear up early for Spring Sports</h1>
<p>We have over 3,000 cleats, helmets, and other sports gear to prepare yourself</p>
<button>View Gear</button>
</div>
<div class="sports_grid">
<div class="sport"></div>
<div class="sport"></div>
<div class="sport"></div>
<div class="sport"></div>
</div>
</section>

CSS

.sports {
  height: 25rem;
  background-color: green;
  background-image: ;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  font-family: 'Montserrat';
  background-image: url("https://media.istockphoto.com/id/187330520/photo/football-field-corner-with-white-marks.jpg?b=1&s=170667a&w=0&k=20&c=-P5I-MZQiEBIxfoqisN61VRt8dAfGTAFptZ6O-aH7x4=");
  background-size: cover;
}

.sports_text {
  width: 15rem;
}

.sports_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 350px;
}

.sport {
  width: 150px;
  height: 150px;
  border-radius: 8px;
}

button {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  color: white;
  background-color: transparent;
  border: solid 0.5px white;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  color: black;
  background-color: white;
}
/*Giving each sport a background image*/
.sport:nth-child(1) {
  background-image: url('https://images.unsplash.com/photo-1532508583690-...');
  background-size: cover;
}

.sport:nth-child(2) {
  background-image: url('https://images.unsplash.com/photo-1622279457486-62dc...');
  background-size: cover;
}

.sport:nth-child(3) {
  background-image: url('https://images.unsplash.com/photo-1606925797300-...');
  background-size: cover;
}

.sport:nth-child(4) {
  background-image: url('https://images.unsplash.com/photo-1620740528428-59fb523a484a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
  background-size: cover;
}

.sport:hover {
  backdrop-filter: brightness(50px);
  background-color: black;
  background-image: none;
}

/*Positioning and adding the sport names*/
.sport:hover:before {
  position: relative;
  content: 'Sport';
  font-family: 'Poppins';
  color: white;
  top: 40px;
  left: 20px;
}

/*Giving each sport div a sport name*/
.sport:nth-child(1):hover::before {
  content: 'Golf';
}

.sport:nth-child(2):hover::before {
  content: 'Tennis';
}

.sport:nth-child(3):hover::before {
  content: 'Soccer';
}

.sport:nth-child(4):hover::before {
  content: 'Baseball';
}

Footer

Create a footer element with a header (that'll be our logo) and multiple lists in it.
Give the footer a display of flex to center and space-evenly it's items
Give each list item a hover effect where its color changes to blue

HTML

<footer>
<h2 style="font-family: 'Poppins'"><span class="logo_text">S</span>ole<span class="logo_text">S</span>urf</h2>

<ul>
<li>Contacts</li>
<li>Instagram</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>

<ul>
<li>Lensco</li>
<li>Github</li>
<li>DEV</li>
<li>Twitter</li>
<li>Github Repo</li>
</ul>
</footer>

CSS

footer {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #000814;
  color: white;
  font-family: 'Montserrat';
  height: 10rem;
}

ul {
  list-style-type: none;
  display: grid;
  gap: 8px;
}

li {
  cursor: pointer;
  transition: 0.3s;
}

li:hover {
  color: blue;
}

Conclusion

This website isn't really responsive to mobil since you won't be able to fully see the background images, but i'm too busy right now to fix it 😅. If you have any improvements you'd like to add go to the gihub repo or comment below! Sorry if this blog seemed a bit long, its the carousels that were the main part of the website and it needed a lot of code. I also added some media querys so the website doesn't overflow (but only a little) when on mobil. Next time i'll be talking about making a resturant home page so thank you and follow me for more!

DEV Community

How to make a small Ecommerce Shoe store

Introduction

Table of contents

Nav menu

HTML

CSS

Winter Sale section

HTML

CSS

Shoe menu

HTML

CSS

Shoe carousels

Creating and styling the carousels

HTML

CSS

Styling the buttons

CSS

Styling the shoe items

Javascript for carousels

Spring gear

HTML

CSS

Footer

HTML

CSS

Conclusion

Top comments (0)

Read next

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Making OpenGraph (OG) Images More Accessible: Now Design & Preview Everything for Free 🎨

TryHackMe API Wizard Breach Walkthrough

How Lithe Makes Web Application Development in PHP Faster with Less Code