What I was using before ?🧑‍💻

I was previously using core CSS. I wanted to choose a framework that was as close to the final design as possible. There are several options, but I chose Bootstrap because I am already familiar with all CSS concepts, making it simple for me to experiment with Bootstrap.

What's Tindog?

My website is a startup website that is like Tinder for dogs. 🐕 By building this project, I learned a lot about Bootstrap and its components. How to add them, and customize them. How to make a website responsive with a grid system.

Tindog is an online dating application. In Tindog, users "swipe right" to like or "swipe left" to dislike other users' profiles, which include their photos, a short bio, and a list of their interests. Tindog uses a "double opt-in" system where both users must like each other before they can exchange messages.

You can always check Tindog's website by 👉clicking here

Check out the GitHub repository for HTML and CSS code.

The tech stack used is HTML, CSS, and Bootstrap.

Title

Very first, you have to quickly 🧑‍🏫 add Bootstrap to your project to use it.

CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The first thing you'll notice 👀 in my project is the navbar. Bootstrap allows us to use a prebuilt navbar on our website and customize it according to our needs.

<nav class="navbar navbar-expand-lg navbar-dark"></nav>

In the title section, download buttons are also used from Bootstrap. App store and play store icons are taken from 👉 font awesome

<!-- font awesome -->   
<script src="https://kit.fontawesome.com/b227619b8d.js"crossorigin="anonymous"
 ></script>

<!-- icons -->   
<i class="fa-brands fa-app-store fa-beat"></i>
<i class="fa-brands fa-google-play fa-beat"></i>

Testimonial

I have used a carousel for sliding reviews in my testimonial section. A carousel is a slideshow component for cycling through elements, such as images or slides of text.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

To learn more about the carousel, you can click here.👆

Pricing

For the pricing💵 section Cards are used. A card is a flexible and extensible content container. It includes options for headers, bodies, and footers. It is used with the default grid system of Bootstrap.

<div class="row">
    <div class="col">
        <div class="cards">
            <div class="card-header"></div>
            <div class="card-body"></div>
            <div class="card-footer"></div>
        </div>
    </div>
    <div class="col">
        <div class="cards">
            <div class="card-header"></div>
            <div class="card-body"></div>
            <div class="card-footer"></div>
        </div>
    </div>
    <div class="col">
        <div class="cards">
            <div class="card-header"></div>
            <div class="card-body"></div>
            <div class="card-footer"></div>
        </div>
    </div>
</div>

Footer

Finally, in the footer section, I have added download buttons to download the TinDog app for Android and iOS 📲, and all our social media handles to connect with us.

Little Bit about CSS😎

In CSS I used common properties like padding, font family, margin, and background colour with selectors like class and id.

I also used and learned about media queries and how to combine selectors.

@media (max-width:1000px) {
    #title{
    }
    .title-image{
    }
}

You've come to the end of this article🥳

Thank you🙌 for taking the time to read this little me's project journal. This is very kind of you. If you have any feedback or comments, please leave them in the comments section. I'm new to writing, and it's still intimidating to me😶‍🌫️, but I'll learn from my mistakes.

Special thanks to Om Gawande✌️ for motivating me to write this blog post. 🤩

If you enjoyed this article, give it a 💖 so others can find it too.👋