How to create a shopping website using html and css

Hello, today in this article, we will learn how to create an eCommerce website using HTML, CSS and JS. This is a part of the full stack eCommerce website. In this part, we will only create the front page UI. We will create 4 pages in this tutorial: home page, product page, search page, and 404 page.

To see a demo or if you want a full coding video tutorial for better understanding. You can watch the tutorial below.

I appreciate if you can support me by subscribing to my YouTube channel.

You can see the folder structure of our project below.

Download images, get source code

Let’s start coding.

Write a basic HTML 5 template to index.html. And link the home.css file to the index file. Now create the navigation bar.

Open the home.css file. And inside it before starting to comb. As we will have the same navigation bar and footer on all pages. I thought of making your styles as a separate file. Import the nav.js file inside home.css.

And make navbar related styling inside nav.css.

Nav.css

Exit

Now create links below the navbar.

The code above is inside the navbar element.

Exit

Great! but as we want navigation bar on all pages. I don’t like to copy code. So let’s make this navigation bar with JS dynamically. Open the nav.js file. And create a createNav function inside it.

If you see the code above, inside the function I am first selecting the navigation element using the querySelector method. And then write your HTML using innerHTML. And the value of innerHTML are the same HTML elements that we created in the index.html file. Now you can remove the HTML elements from there and also import nav.js.

Output

Now, let’s make your header.

Start.css

Output

Now, we need to make the product card slider. For that code, this.

Note: we’re inside the index.html file.

Home.css

Output

Now make the product card.

We will make these products cards with JS and database dynamically later.

Home.css

Output

Now do, previous and next button of course.

Output

Now, let’s do that the slider works. Open the home.js file. And code this.

In the code above, I’m simply selecting all product containers, next buttons, previous buttons using the querySelectorAll method. And then just looping through each container. And add the click event to the next button and the previous button.

Import the home.js file into index.html.

We’re also done with the product cards. Let’s do the collections section now.

Output

You can now copy the product section 2 more times after the collection item. And you can also change the pictures and data. Don’t worry, we will make the cards dynamically with the database in the future.

After you finish copying the product section. The only thing left on our page is the footer. So let’s do it.

Like we did with the navigation bar. Import footer.css into the home.css file.

Home.css

Footer.css

Output

Make information elements inside the footer.

Footer.css

Output

Great job. Like we did with the navigation bar. Let’s make this footer also with JS dynamically. Open footer.js and do the same thing we did for the navigation bar.

You can now remove the footer elements from the index file. And import the footer.js file.

index.html

Output

Great! We are done with the home page. Now, let’s create the product page.

On the product page. Write HTML 5 template. And link the file home.css, product.css.

And import these JS files.

And now you can create a navigation bar and footer adding a navigation and footer element inside the body.

Output

Isn’t it that simple? You can also copy the product container element from the home page to here. After making copies of the cards. Let’s do the product details section. Do it after the navigation bar.

Product.css

Output

Make the details section right now.

Output

Now we just have to make a simple section. A detailed description section. The mark is out of the product details

Output

Now create the image slider working, and the size button can be toggled. Open the product.js file.

And then code this.

Great job! we’re done with the product page too. Now we need to make a search page which is very simple.

Like we did the navigation bar and footer on the product page. Do the same for this page too. Link these files to it.

Now make the product cards. Make the header first.

Search.css

Output

For the cards, we’ll use the same card we did for the home page. Just copy the product container element from the home page and paste it inside the search results.

But we are using the flex box which will make the cards go side by side. But we don’t want that for our search page. So just write the elements property of the product container.

Product.css

Output

We’re almost done. The only page we need to create is the 404 page.

Do the same for this page as well to make the navigation bar. I didn’t do footer on this page, but if you want, you can do that too. After making the navigation bar. Link to the 404.css file. And let’s code the page.

Footer.css

Output

So that’s sitting down for today. Good job. I know it was a lot. But the e-commerce website is not that simple. Don’t forget to follow me on youtube and dev.to if you don’t want to miss the next part of this series.

I hope you understood everything. If you have any questions or I missed something, let me know in the comments.

1. Best CSS effect
2. Infinte CSS loader
3. Disney+ Clone
4. Youtube API – Youtube Clone
5. TMDB – Netflix Clone

I really appreciate you subscribing to my YouTube channel. I create awesome web content.

Source code, please donate to me on Paypal

Your donation really motivates me to make more awesome tutorials like this. Support me on patreon, buy me a coffee, donate on paypal

Thanks for reading.

.