Simple Card Design Using HTML & CSS (Beginner Friendly Project)

 



Learn How to Build a Beautiful Card Layout Step by Step

When we start learning web development, one of the most exciting parts is creating visually appealing UI components. Among these, card design layouts are one of the most commonly used elements in modern websites.

From travel websites to e-commerce platforms, cards are everywhere. In this tutorial, we will learn how to build a simple and clean card design using HTML and CSS. This project is beginner-friendly and helps us understand how real-world UI components are structured and styled.


Why Should We Learn Card Design?

Before we jump into coding, let’s understand why card layouts are important.

Cards are widely used because they:

  • Organize content in a clean and structured way
  • Improve user experience with visually separated sections
  • Make layouts responsive and flexible
  • Are reusable across different projects

By building this project, we will not only learn HTML and CSS but also understand how UI components are designed in real applications.


Project Overview

In this project, we are going to create a travel destination card layout. Each card will display:

  • An image of the destination
  • Destination name
  • Location details
  • Price information
  • A “Book” button

We will also arrange multiple cards in a row using layout techniques.


Step 1: HTML Structure (index.html)

Let’s begin by creating the structure of our card layout using HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cards</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="container">
      <div class="exploreDestinationContainer">
        <div class="exploreTitle">Explore Destinations</div>
        <div class="exploreDesc">
          Explore the best of India, from mountains to beaches.
        </div>
        <!-- Cards -->
        <div class="exploreGrid">
          <!-- Card 1 -->
          <div class="exploreCard">
            <img src="./images/barmer.jpg" alt="Jaisalmer" />
            <div class="exloreCardContent">
              <div>Barmer</div>
              <div>Rajasthan</div>
            </div>
            <div class="exploreCardPrice">
              <div>₹ 3000/-</div>
              <button>Book</button>
            </div>
          </div>

          <!-- Card 2 -->
          <div class="exploreCard">
            <img src="./images/bikaner.jpg" alt="Jaisalmer" />
            <div class="exloreCardContent">
              <div>Bikaner</div>
              <div>Rajasthan</div>
            </div>
            <div class="exploreCardPrice">
              <div>₹ 2500/-</div>
              <button>Book</button>
            </div>
          </div>

          <!-- Card 3 -->
          <div class="exploreCard">
            <img src="./images/jaisalmer.jpg" alt="Jaisalmer" />
            <div class="exloreCardContent">
              <div>Jaisalmer</div>
              <div>Rajasthan</div>
            </div>
            <div class="exploreCardPrice">
              <div>₹ 3500/-</div>
              <button>Book</button>
            </div>
          </div>

          <!-- Card 4 -->
          <div class="exploreCard">
            <img src="./images/thar.webp" alt="Jaisalmer" />
            <div class="exloreCardContent">
              <div>Thar</div>
              <div>Rajasthan</div>
            </div>
            <div class="exploreCardPrice">
              <div>₹ 5000/-</div>
              <button>Book</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Understanding the HTML Code

Let’s break down what we’ve done:

  • We created a main container to hold the entire layout
  • Added a title and description section
  • Used a grid container (exploreGrid) to hold multiple cards
  • Each card (exploreCard) includes:
    • Image
    • Content section (name + location)
    • Price and button section

This structure is clean, reusable, and easy to expand when building larger applications.


 Step 2: CSS Styling (index.css)

Now let’s style our card layout to make it visually attractive.

.container {
  margin-bottom: 40px;
  background-color: #fef8ee;
  padding: 50px 0px;
  height: 100vh;
}

.exploreDestinationContainer {
  width: 80%;
  margin: auto;
}

.exploreTitle {
  font-size: 30px;
  font-weight: 600;
  color: black;
  margin-bottom: 10px;
}
.exploreDesc {
  color: #5a6f8c;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.exploreGrid {
  display: flex;
  gap: 20px;
}
.exploreCard {
  width: 100%;
  height: 330px;
  border: 1px solid rgb(207, 207, 207);
  border-radius: 10px;
  background-color: rgb(248, 248, 248);
}
.exploreCard:hover{
  box-shadow: 2px 2px 10px rgb(208, 207, 207);
}
.exploreCard img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.exloreCardContent {
  padding: 15px 20px;
}
.likeIcon {
  font-size: 20px;
  cursor: pointer;
}
.exloreCardContent > :first-child {
  color: black;
  font-size: 20px;
  font-weight: 600;
}
.exloreCardContent > :last-child {
  color: #5a6f8c;
  font-size: 16px;
  font-weight: 500;
}
.exploreCardPrice {
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
}
.exploreCardPrice > :first-child {
  font-size: 16px;
  font-weight: 600;
  color: black;
}
.exploreCardPrice button {
  background-color: orange;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
.exploreCardPrice button:hover {
  background-color: transparent;
  border: 1px solid orange;
  color: orange;
}


What We Learned from This Project

By building this card design, we learned:

  • How to structure UI components using HTML
  • How to design layouts using CSS
  • How to use Flexbox for arranging elements
  • How to apply hover effects for better UI interaction
  • How to create reusable and scalable components

These concepts are essential for building modern web applications.


How Can We Improve This Project?

Once we understand the basics, we can enhance this project further by:

  • Making the layout responsive using media queries
  • Adding animations and transitions
  • Using CSS Grid instead of Flexbox
  • Connecting the “Book” button to a real application
  • Fetching dynamic data using JavaScript


Conclusion

In this tutorial, we successfully created a simple and clean card design using HTML and CSS. By working step

by step, we understood how to structure content and style it to create a visually appealing layout.

Projects like this help us move beyond theory and start building real-world UI components. As we continue practicing,

we will become more confident in designing modern web interfaces.

Remember, consistency is the key. The more we build, the better we understand.

Keep practicing, keep building, and keep growing as a developer 🚀


📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Next?

In the next part of our HTML & CSS series, we will build a Taj Mahal “About” page. In this project,

we will learn how to use HTML tables and structure content more effectively. This will take our learning to the

next level by combining layout design with structured data.


Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.

Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

HTML Tags and Attributes Explained (Beginner Guide with Form Examples)

Image
Introduction to HTML Tags and Attributes If you are starting your journey in web development, understanding HTML tags and attributes is the first and most important step. These are the core building blocks of every webpage, especially when creating forms like registration forms, login forms, and signup forms. Every website you see on the internet is made using HTML elements, and tags are used to define those elements. Attributes enhance those elements by providing additional functionality and information. Without understanding tags and attributes, it becomes difficult to build structured and interactive web pages. In this tutorial, we will learn: What HTML tags are What HTML attributes are Types of HTML tags Essential HTML tags used in forms What Is an HTML Tag? An HTML tag is a keyword enclosed in angle brackets ( < > ) used to define the structure and content of a webpage. Tags tell the browser how to display content such as headings, paragraphs, images, links, and mo...
Read more

Most Commonly Used HTML Tags (Beginner-Friendly Guide)

Image
HTML (HyperText Markup Language) is the foundation of every website we see on the internet. Whether we are building a simple webpage or a complex web application, HTML is the starting point that helps us structure content effectively. In this article, we will explore the most commonly used HTML tags, understand how they work, and learn the difference between block-level elements and inline elements. This guide is designed especially for beginners who want to build a strong foundation in web development. By learning these essential concepts, we can improve our coding skills, write cleaner and more organized code, and create well-structured, professional-looking web pages. It also helps us understand how browsers render content and how different elements behave in real-world projects. Why Should We Learn HTML Tags? Before diving into the types of elements, let’s understand why learning HTML tags is important. When we understand HTML properly: We can create well-structured web pages ...
Read more