How to creat an eCommerce website


In today's article, we are about learning how to develop a simple ecommerce website with only bootstrap 5 and html .
This project illustrate  a static web page development. Where all visitor can view your products,price,and a telephone number they can call to buy our products. Without talking too much ,let start coding.




Put  this in your header tag

1. First of all, load the Bootstrap 5 and Font Awesome 5 (for icons), and style CSS into the head tag of your HTML page.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome 5 CSS -->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>
<!-- Products List CSS -->
<link rel="stylesheet" href="css/style.css">

2. After that, create the HTML structure for navbar and product list as follows:

<div class="container bg-white">
    <nav class="navbar navbar-expand-md navbar-light bg-white">
        <div class="container-fluid p-0"> <a class="navbar-brand text-uppercase fw-800" href="#"><span class="border-red pe-2">New</span>Product</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
            <div class="collapse navbar-collapse" id="myNav">
                <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">All</a> <a class="nav-link" href="#">Women's</a> <a class="nav-link" href="#">Men's</a> <a class="nav-link" href="#">Kid's</a> <a class="nav-link" href="#">Accessories</a> <a class="nav-link" href="#">Cosmetics</a> </div>
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-red">sale</div>
            <div class="title pt-4 pb-1">Winter Sweater</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price"># 6,000.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-black">out of stock</div>
            <div class="title pt-4 pb-1">Denim Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price">#5500.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-green">new</div>
            <div class="title pt-4 pb-1"> Empire Waist Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price">#7000.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="title pt-4 pb-1">Pinafore Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price">#6000.0</div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-red">sale</div>
            <div class="title pt-4 pb-1">Winter Sweater</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price"># 6000.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-black">out of stock</div>
            <div class="title pt-4 pb-1">Denim Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price">#5500.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="title pt-4 pb-1"> Empire Waist Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price">#7000.0</div>
        </div>
        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">
            <div class="product"> <img src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">
                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>
                    <li class="icon mx-3"><span class="far fa-heart"></span></li>
                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>
                </ul>
            </div>
            <div class="tag bg-green">new</div>
            <div class="title pt-4 pb-1">Pinafore Dresses</div>
            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>
            <div class="price"># 6000.0</div>
        </div>
    </div>
</div>

3. Finally, load the Bootstrap 5 JS file before closing the body tag and done.

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUV
Complete source code:

<!DOCTYPE html>
<html>
<head>
<title>Codelibery ecommerce website</title>

<!-- Bootstrap 5 CSS -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Font Awesome 5 CSS -->

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>

<!-- Products List CSS -->

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="container bg-white">

    <nav class="navbar navbar-expand-md navbar-light bg-white">

        <div class="container-fluid p-0"> <a class="navbar-brand text-uppercase fw-800" href="#"><span class="border-red pe-2">New</span>Product</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>

            <div class="collapse navbar-collapse" id="myNav">

                <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="#">All</a> <a class="nav-link" href="#">Women's</a> <a class="nav-link" href="#">Men's</a> <a class="nav-link" href="#">Kid's</a> <a class="nav-link" href="#">Accessories</a> <a class="nav-link" href="#">Cosmetics</a> </div>

            </div>

        </div>

    </nav>

    <div class="row">

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-red">sale</div>

            <div class="title pt-4 pb-1">Winter Sweater</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#6000.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-black">out of stock</div>

            <div class="title pt-4 pb-1">Denim Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#5500.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-green">new</div>

            <div class="title pt-4 pb-1"> Empire Waist Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#7000.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="title pt-4 pb-1">Pinafore Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#6000.0</div>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/54203/pexels-photo-54203.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-red">sale</div>

            <div class="title pt-4 pb-1">Winter Sweater</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#6000.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/6764040/pexels-photo-6764040.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-black">out of stock</div>

            <div class="title pt-4 pb-1">Denim Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#5500.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/914668/pexels-photo-914668.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="title pt-4 pb-1"> Empire Waist Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#7000.0</div>

        </div>

        <div class="col-lg-3 col-sm-6 d-flex flex-column align-items-center justify-content-center product-item my-3">

            <div class="product"> <img src="https://images.pexels.com/photos/6311392/pexels-photo-6311392.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

                <ul class="d-flex align-items-center justify-content-center list-unstyled icons">

                    <li class="icon"><span class="fas fa-expand-arrows-alt"></span></li>

                    <li class="icon mx-3"><span class="far fa-heart"></span></li>

                    <li class="icon"><span class="fas fa-shopping-bag"></span></li>

                </ul>

            </div>

            <div class="tag bg-green">new</div>

            <div class="title pt-4 pb-1">Pinafore Dresses</div>

            <div class="d-flex align-content-center justify-content-center"> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> <span class="fas fa-star"></span> </div>

            <div class="price">#6000.0</div>

        </div>

    </div>

</div>


<style> 


</style>

<script>


</script>



</body>
</html>

What next?

  • Copy and past the complete source code into your IDE .
  • Creat a folder on your system, save this code with any name you like and with an extension called. ".html"(e.g codelibery online store.html).
  •  Navigate to this file on your system. open with any google chrome or any other brower. 
With the above provided source code, you can make some little changes like price ,product, phone number,add about,contact and other important identities of your business. 


You can learn how to modify this project with this website:


Free website source code links :



About Me


Akinpelu Abiodun


I am Akinpelu Abiodun Moses by name. I am a programmer and a graphics designer.
Follow my google website link to know more about me:


Popular Post

  • Wifi hacking with python
  • Complete html,css and javascript web page
  • Facebook login and sign up form with html,css and javascript 
  • Resturant,college,hostital and pharmercy store management system with python
  • online shopping website with html,css and javascript 
  • Text to speech app with html,css and javascript 
  • Online text editor with html,css and javascript 
  • Quiz app with html,css and javascript 
  • To -do app with html,css and javascript 
You can contact me for there source code on my website:







Comments

Post a Comment

Popular posts from this blog

Home Automation using NodeMCU ESP8266 and Blynk 2.0(IOT)

Image
 Hello! guys,let us develop another real life project today. we are about to control any of our home electronics,lighting and power system with our  smart phone . We are using a diffrent micro controller with wifi module called NodeMCU ESP8266 to hook up all our connection to cloud . In addition, we are using Blynk 2.0 as our mobile app to control all the embeded system from our smart phones. THE WORK FLOW IS AS FOLLOWING: CODE<------>NodeMCU ESP8266<---->CLOUD<---->BLYNK2.0<------>RELAYS<-->LOADS<--->CODE Circuit of the Blynk NodeMCU Home Automation projects The circuit is very simple, I have used  D1, D2, D5 & D6  GPIO pins to control the 4-channel relay module. And the GPIO  SD3, D3, D7  &  RX  are connected with the switches to control the relay module manually. I have used the  INPUT_PULLUP  function in Arduino IDE instead of using the pull-up resistors with each switch. As per t...
Read more