Designing an Advanced Pricing Table with CSS Grid

Introduction to Advanced Pricing Tables

Welcome to Designing an Advanced Pricing Table with CSS Grid!

In this project, we'll create a fully responsive pricing table using CSS Grid. A well-designed pricing table is essential for showcasing different pricing plans on a website, ensuring that it looks great on various devices, from desktops to mobile phones.

Here's what we'll cover in this tutorial:

Setting up the HTML structure for the pricing table.
Applying basic styling to the table components.
Using CSS Grid for layout and responsiveness.
Adding hover effects for interactivity.
Making the pricing table responsive for different screen sizes.

By the end of this project, you'll have a fully functional and responsive pricing table. Let's get started by setting up our project files!

Setting Up Your Workspace

Creating Your Project Folder and Files

Before we start coding, let's set up a workspace for our project:

Step 1: Create Your Project Folder

Think of this folder like a container where we'll keep all our project files - just like having a special drawer for your art supplies!

On Windows:
1. Right-click on your desktop
2. Choose "New" > "Folder"
3. Name it "advanced-pricing-table"
On Mac:
1. Right-click on your desktop
2. Choose "New Folder"
3. Name it "advanced-pricing-table"

Step 2: Get Your Text Editor Ready

A text editor is like your crafting tool - it's where we'll write our code. We recommend Visual Studio Code because it's free and beginner-friendly!

Download Visual Studio Code from code.visualstudio.com if you haven't already
Install it on your computer
Open VS Code and drag your "advanced-pricing-table" folder into the window

Step 3: Create Your Project Files

We need two special files - think of them as two pieces of paper where we'll write different things:

index.html - This is like the blueprint of our pricing table (the structure)
styles.css - This is like our painting palette (where we make things pretty)

To create these files:

Click "New File" in VS Code
Save it as "index.html"
Create another new file
Save it as "styles.css"

🎯 Success Check: At this point, you should have:

A folder named "advanced-pricing-table" on your desktop
Visual Studio Code open with your folder
Two empty files: index.html and styles.css

👉 Need Help? If something's not working, try closing VS Code and opening it again, or create the files using the "File → New File" menu.

Setting Up the HTML Structure

Creating the Pricing Table HTML

Before we dive into CSS, let's set up the HTML structure for our pricing table:

1. Open "index.html": Open your "index.html" file in your code editor.

2. Add the Pricing Table HTML: Copy and paste the following code into your "index.html" file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Pricing Table</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="pricing-table">
    <div class="plan">
      <div class="plan-header">
        <h3>Basic</h3>
        <span class="price">$9.99</span>
      </div>
      <ul class="plan-features">
        <li>10 GB Storage</li>
        <li>100 GB Bandwidth</li>
        <li>2 Domains</li>
        <li>Email Support</li>
      </ul>
      <button>Sign Up</button>
    </div>
    <div class="plan">
      <div class="plan-header">
        <h3>Pro</h3>
        <span class="price">$19.99</span>
      </div>
      <ul class="plan-features">
        <li>50 GB Storage</li>
        <li>500 GB Bandwidth</li>
        <li>10 Domains</li>
        <li>Priority Email Support</li>
      </ul>
      <button>Sign Up</button>
    </div>
    <div class="plan">
      <div class="plan-header">
        <h3>Premium</h3>
        <span class="price">$29.99</span>
      </div>
      <ul class="plan-features">
        <li>100 GB Storage</li>
        <li>1 TB Bandwidth</li>
        <li>Unlimited Domains</li>
        <li>24/7 Phone Support</li>
      </ul>
      <button>Sign Up</button>
    </div>
  </div>
</body>
</html>

Let's understand the HTML structure:

<div class="pricing-table">: Represents the entire pricing table.
<div class="plan">: Represents each pricing plan.
<div class="plan-header">: Contains the title and price of the plan.
<ul class="plan-features">: Contains the list of features for the plan.
<button>: Represents the "Sign Up" button for each plan.

Save your "index.html" file. Now we have the basic HTML structure in place. In the next step, we'll start applying CSS styles to our pricing table.

Styling the Body

Let's start by styling the body of our HTML document to ensure a consistent and clean layout.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Body Styles: Copy and paste the following CSS code into your "styles.css" file:

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

Let's understand the CSS rules we just added:

font-family: Arial, sans-serif;: Sets the default font for the entire page.
margin: 0;: Removes the default margin from the body.
padding: 0;: Removes the default padding from the body.
box-sizing: border-box;: Ensures that the padding and border are included in the element's total width and height.
background-color: #f4f4f4;: Sets the background color of the body to a light gray.
display: flex;: Uses flexbox to center the content.
justify-content: center;: Horizontally centers the content.
align-items: center;: Vertically centers the content.
height: 100vh;: Sets the height of the body to the full viewport height.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the basic layout applied to your page.

In the next step, we'll style the pricing table container.

Styling the Pricing Table Container

Now, let's style the pricing table container to give it a clean and modern look.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Pricing Table Container Styles: Copy and paste the following CSS code into your "styles.css" file:

.pricing-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 90%;
  max-width: 1200px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Let's understand the CSS rules we just added:

display: grid;: Uses CSS Grid to layout the pricing plans.
grid-template-columns: repeat(3, 1fr);: Creates three equal-width columns for the pricing plans.
gap: 20px;: Adds a 20px gap between the pricing plans.
width: 90%;: Sets the width of the container to 90% of the parent element.
max-width: 1200px;: Sets the maximum width of the container to 1200px.
padding: 20px;: Adds padding to the container for spacing.
background-color: #fff;: Sets the background color of the container to white.
border-radius: 10px;: Rounds the corners of the container.
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);: Adds a subtle shadow to the container.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the styled pricing table container.

In the next step, we'll style the individual pricing plans.

Styling the Pricing Plans

Now, let's style the individual pricing plans to make them visually appealing and easy to read.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Pricing Plan Styles: Copy and paste the following CSS code into your "styles.css" file:

.plan {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.plan-header {
  background-color: #007bff;
  color: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 20px;
}

.plan-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

.plan-header .price {
  font-size: 2rem;
  font-weight: bold;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.plan-features li {
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  font-size: 1rem;
  color: #555;
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.plan button:hover {
  background-color: #0056b3;
}

Let's understand the CSS rules we just added:

.plan: Styles the individual pricing plans with a white background, rounded corners, padding, shadow, and centered text.
.plan-header: Styles the header of the pricing plan with a blue background, white text, padding, and rounded top corners.
.plan-header h3: Styles the title of the pricing plan with a larger font size and no margin.
.plan-header .price: Styles the price of the pricing plan with a larger font size and bold weight.
.plan-features: Styles the list of features with no list style, padding, or margin.
.plan-features li: Styles the individual features with padding, a bottom border, and specific font and color.
.plan-features li:last-child: Removes the bottom border from the last feature.
.plan button: Styles the "Sign Up" button with a blue background, white text, padding, border-radius, cursor, and font size. Adds a transition effect for smooth color changes.
.plan button:hover: Changes the background color of the button on hover.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the styled pricing plans.

In the next step, we'll make the pricing table responsive for different screen sizes.

Making the Pricing Table Responsive

Let's ensure our pricing table looks great on various devices by adding responsive design using CSS media queries.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Responsive Design Styles: Copy and paste the following CSS code into your "styles.css" file:

@media (max-width: 768px) {
  .pricing-table {
    grid-template-columns: 1fr;
  }

  .plan {
    margin-bottom: 20px;
  }
}

Let's understand the CSS rules we just added:

@media (max-width: 768px): A media query for screens up to 768px wide (e.g., tablets and mobile phones).
.pricing-table: Changes the grid layout to a single column for better visibility on smaller screens.
.plan: Adds a margin to the bottom of each pricing plan to create space between them.

Save your "styles.css" file. Now, if you resize your browser window or view the pricing table on different devices, you'll see the layout adapt to different screen sizes.

In the next step, we'll add final touches to the pricing table.

Adding Final Touches

Let's add the final touches to our responsive pricing table to ensure it is fully functional and visually appealing.

1. Open "styles.css": Open the "styles.css" file in your code editor.

2. Add Final Touches: Copy and paste the following CSS code into your "styles.css" file:

.plan:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

Let's understand the CSS rules we just added:

.plan:hover: Scales the pricing plan slightly larger on hover to create a subtle zoom effect.
transition: transform 0.3s ease;: Adds a smooth transition effect for the zoom effect.

Save your "styles.css" file. Now, if you open "index.html" in a web browser, you'll see the final touches in action.

Congratulations! You've completed the CSS project, "Design an Advanced Pricing Table." You've learned how to create a fully responsive pricing table using HTML and CSS.

Feel free to continue customizing your pricing table and exploring more CSS techniques. Happy coding!