how to make a shopping site easily 2021

Spread To Friends

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 !

close
Oval@3x 2

Don’t miss these updates!

We don’t spam! Read our privacy policy for more info.


Spread To Friends

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

  • February 4, 2021 at 11:06 pm
    Permalink

    Your mode of describbing all in this piece of writing is in fact pleasant, all bee capable of simply be aware oof it, Thanks a lot.

    Reply
  • February 4, 2021 at 11:07 pm
    Permalink

    Way cool! Somee very valid points! I appreciate you penning this post and the rest of the website is also really good.

    Reply
  • February 4, 2021 at 11:13 pm
    Permalink

    I am pleased that I detected this web blog, just the right information that I
    was searching for!

    Reply
  • February 4, 2021 at 11:14 pm
    Permalink

    Hi there to every body, it’s my first go to see of
    this webpage; this webpage contains amazing and really
    excellent data in support of readers.

    Reply
  • February 4, 2021 at 11:14 pm
    Permalink

    Wow, this article is nice, my sister is analyzing
    such things, so I am going to inform her.

    Reply
  • February 6, 2021 at 9:26 pm
    Permalink

    Hello! Do you use Twitter? I’d ljke to follow you if that
    would be okay. I’m definitely enjoying your blog and look forward too new articles.

    Reply
    • February 7, 2021 at 12:13 am
      Permalink

      All social follow links are already given.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *