Pricing Card Challenge

Submit Assignment

Points:

Due By:

January 22, 2026 at 8:00:00 PM

Pricing Card Challenge

Learning Objectives

Create vertical layouts
Center content horizontally
Combine flexbox with other CSS properties for complete designs
Change the main axis to accommodate layout
Create an intrinsically responsive web design using relevant flex properties
Break a complex design down into smaller pieces

The Challenges

Challenge #1 - Single Card

Create a single pricing card component commonly seen on SaaS websites. The card should display a plan name, price, feature list, and call-to-action button in a clean, centered layout.

Challenge #2 - Row of Pricing Cards

You will need to take your card component and then place it alongside other pricing cards. The Pro plan will be a special card that you need to design, but it is still flexbox.

The pricing cards should be layout out horizontally. If there is not enough room, then the cards should naturally flow to the next line.

Multiple pricing cards in a line, with the Pro card prominently featured.

Starting Code

HTML Code

<!DOCTYPE html>

<head>

<title>Pricing Card</title>

</head>

<body>

<li>✓ Unlimited Projects</li>

<li>✓ 24/7 Support</li>

<li>✓ Custom Domain</li>

<li>✓ Advanced Analytics</li>

</ul>

<button class="cta-button">Get Started</button>

</div>

</body>

</html>

CSS Code

  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

body {
    background-color: #f0f0f0;
    padding: 2rem;
    font-family: Arial, sans-serif;
}

.pricing-card {
    background-color: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
    
.plan-name {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
}

.price {
    font-size: 2.5rem;
    color: #61dafb;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.features {
    list-style: none;
    margin-bottom: 2rem;
}

.features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.cta-button {
    background-color: #61dafb;
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
}     

.cta-button:hover {
    background-color: #4fa8c5;
}

Use of AI

AI is a tool for understanding, not a shortcut to completion
Struggle is part of learning - if everything feels too easy, you're probably not learning
The goal is mastery - you want to internalize these concepts so they become second nature
Real-world coding requires understanding, not just copying solutions

Acceptable Prompt

"I want you to act as a strict Socratic Web Development Tutor. I am a student trying to learn web development concepts.

Your Goal: Help me assess and improve my mental model of a specific concept. Your Restriction: Under NO circumstances are you allowed to write the final code for me or give me the direct answer. You must only provide logic, pseudocode, or analogies.

The Process:

I will provide you with a concept I am trying to understand or a problem I am trying to solve, along with my current explanation of how it works.
You will analyze my explanation and give me a Knowledge Grade (1-5 stars) based on accuracy and depth.
If my explanation is flawed or incomplete, do NOT correct it immediately. Instead, ask me a specific question that forces me to realize my mistake.
If I am stuck on code, suggest which property or method I should look up in the documentation (e.g., MDN), but do not write the syntax for me.

Example Interaction: Me: 'I think justify-content aligns items vertically in a row.' You: 'Knowledge Grade: ⭐⭐. You are close, but consider the 'main axis' vs the 'cross axis.' If your flex-direction is set to row, which way does the main axis run? based on that, what is justify-content actually controlling?'

Let's begin. I will now explain what I am working on."

Locked Message