Advertisement
webdev • Pricing cards are one of the most common UI components you’ll see on modern websites—especially landing pages and SaaS product sites. They help visitors quickly compare plans, features, and prices. For beginners learning web development, building a pricing card is a great exercise to understand layout, spacing, typography, and visual hierarchy.

How to Create a Simple Pricing Card UI Using HTML & CSS (Perfect for Beginners)

5 Min Read Verified Content

In this step-by-step, beginner-friendly tutorial, you’ll learn how to create a clean and professional pricing card using only HTML and CSS. Even if you consider yourself a total newbie or “dummy,” this guide explains everything gently and clearly.



🧱 Step 1 — Create Your Project Folder

Before we start coding, let’s set up a clean workspace.

✔ Do this:

  1. Create a new folder and name it: pricing-card-tutorial

  2. Inside it, create two files:

    • index.html

    • style.css

That’s all — simple and organized.



🧩 Step 2 — Write the HTML Structure

Open index.html and paste the following code:

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

    <div class="card">
        <h2 class="plan-title">Basic Plan</h2>
        <p class="price">$9 <span>/ month</span></p>

        <ul class="features">
            <li>✔ 5 GB Storage</li>
            <li>✔ Email Support</li>
            <li>✔ Basic Analytics</li>
        </ul>

        <button class="btn">Choose Plan</button>
    </div>

</body>
</html>

📝 Explanation for beginners:

  • <div class="card"> — this is the main container.

  • <h2> — the plan name (e.g., Basic, Premium, Pro).

  • .price — the main highlighted price.

  • <ul> — list of features included in the plan.

  • <button> — call-to-action button.

This is the skeleton of your pricing card.



🎨 Step 3 — Add Styling to the Pricing Card

Now open style.css and add this CSS:

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card {
    background: #fff;
    width: 300px;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
}

.plan-title {
    margin: 0;
    font-size: 1.4rem;
}

.price {
    font-size: 2.2rem;
    font-weight: bold;
    color: #2c7;
    margin: 10px 0 20px;
}

.price span {
    font-size: 1rem;
    color: #555;
}

.features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.features li {
    margin: 10px 0;
    font-size: 1rem;
}

.btn {
    background: #2c7;
    color: #fff;
    padding: 12px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s ease;
}

.btn:hover {
    background: #26a65b;
}

📝 What this CSS does (simple explanation):

  • Centers everything on the screen using flexbox

  • Creates a white card with rounded corners

  • Adds a soft shadow for a professional look

  • Styles the price so it stands out

  • Makes the button feel “clickable” with hover animation

Everything here is modern and clean — just like real pricing pages.



📱 Step 4 — Make the Pricing Card Responsive (Mobile Friendly)

Let’s ensure it still looks good on smaller screens.

Add this at the bottom of style.css:

@media (max-width: 500px) {
    .card {
        width: 90%;
        padding: 20px;
    }

    .price {
        font-size: 1.8rem;
    }
}

📝 Explanation:

  • On phones, the card becomes slightly narrower

  • The text scales down to fit nicely

  • Nothing complicated — just a smooth adjustment



🧪 Step 5 — Test Your Pricing Card

Do this:

  1. Open your index.html in a browser

  2. Try resizing the window

  3. The card should shrink smoothly

  4. Hover over the button — notice the soft animation

You now have a fully functional and responsive pricing card.

🎁 Bonus Step — Add More Pricing Tiers

If you'd like three cards side by side (like “Basic”, “Pro”, “Premium”), use a wrapper:

<div class="container">
   <!-- card 1 -->
   <!-- card 2 -->
   <!-- card 3 -->
</div>

And some CSS:

.container {
    display: flex;
    gap: 20px;
}

Now ! — instant pricing section!


Creating a clean and responsive pricing card is an excellent beginner project to practice HTML and CSS. In this tutorial, you learned how to structure content, style UI elements, use flexbox for layout, and add responsive design with media queries. This component is perfect for landing pages, SaaS sites, product pages, or personal portfolio projects. With these building blocks, you’re now one step closer to creating full modern websites.

Advertisement
Back to Webdev