how to make a shopping site easily 2021

make a shopping site with HTML, CSS, and Bootstrap

how to make a shopping site? : Bootstrap has been the most liked site since it’s made. It helps every web developer to develop their sites faster and effectively. About every web developer uses bootstrap’s functionalities in their sites. Today we are going to make a shopping site using HTML, CSS, and bootstrap with their advanced features. 

First Copy the CDNs of Bootstrap

At first go to any browser and type getbootstrap.com and from there click on the get started button and then scroll down and you will get below type of section where all cdn’s are listed. Copy the Css code and go to any IDE (Here I am using Visual studio Code) and paste it between the Head opening and closing tags. 

After that Go to the website (getbootstrap.com) and copy the Js code and go back to your IDE and between body tags paste your code that you have copied before.

Now you are all set for using bootstrap.

Then we have to make a navigation bar

Now go again to your bootstrap website and you can see at the left bar there are many options scroll down and you will get the component opton, so click on the component section and after that you will see the expanded view, so scroll down again and find the navbar option and click on that.

Now scroll down the page and there you can see many types of navigation bars listed. Choose any one from them and copy that below code using the copy button and paste it just after the opening body tag. Now open the .html file using any browser by double clicking on it. You will see a navigation bar on the site you made. 

Then we will make Display Items

To make display Items first make a folder named assets and there you have to paste 9 images of your own they will be named as image1.jpg, image2.jpg … image9.jpg and then type codes like below after the codes you’ve written before to make an outline of the containers and set images between them.

<div class="py-3 bg-bright">
      <div class="container">
        <div class="row">
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image1.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image2.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image3.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image4.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image5.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image6.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image7.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image8.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 
          <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
              <img src="/assets/image9.jpg" class="rounded" style="height: 14rem;" alt="">
              <div class="card-body">
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                  content. This content is a little bit longer.</p>
                <div class="d-flex justify-content-between align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                  </div>
                  <small class="text-muted">9 mins</small>
                </div>
              </div>
            </div>
          </div>
 

Now your image containers are ready. Now you have to make the footer part in the footer part there will be your credits only so it is simple. You can only make a div and on that you can place a p tag to place your credits there. As like below.

<div class="footer">
    <p>Technicalsayan.in All rights Reserved</p>
  </div>

Now after this you have to write your own css and customize it as your own. So you can copy below css code to do that.

.footer{
    margin-top: 20vh;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181818d7;
    color: white;
}

Now your main Parts are ready. After this, you can make other things depending upon your taste to make the site look more attractive and beautiful. After that I know you can make all those pages you want to display, depending on this post.

also checkout : Beautiful Website Making Tip #2

That’s all for this post. See you in another one, Thank you !

Spread To Friends
  •  
  •  
  •  
  •  
  •  
  •  
  •  

13 thoughts on “how to make a shopping site easily 2021”

Leave a Comment