# My First Pricing Page with HTML and CSS and Responsiveness

Recently, I had a class assignment to build a pricing page using only HTML and CSS. At first, I thought it would be simple, just placing some boxes on a page, adding a few colors, and making it look nice. But as I started working on it, I quickly realized that even the smallest design choices required careful thought.

This project pushed me to learn a lot about CSS, from layout techniques to spacing and styling elements properly. I made plenty of mistakes, got stuck multiple times, and spent hours trying to fix issues that seemed minor but made a big difference. Here’s how the journey went.

---

## **Planning the Layout: Where the Confusion Began**

Before I wrote any code, I needed to figure out what a pricing page should include. I looked at some existing websites and noticed a common structure:
- A **title** introducing the pricing options
- A section with **three pricing cards** (Basic, Pro, and Premium)
- Each card showing a **price, features, and a button **
- A **footer** with additional information

That seemed straightforward, so I started coding… and that’s when the real challenges began.

---

## **Structuring the HTML: Simplicity Is Deceptive**

I started by writing the HTML for a single pricing card:

<div class="pricing-card">
  <h3 class="plan-name">Basic Plan</h3>
  <p class="plan-description">Great for individuals starting out.</p>
  <div class="price-container">
    <span class="currency">$</span>
    <span class="price">9</span>
    <span class="period">/month</span>
  </div>
  <ul class="features-list">
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
  </ul>
  <button class="start-button">Get Started</button>
</div>

This looked fine in the browser, but as soon as I duplicated it for the other pricing plans, things started breaking. The cards weren’t aligned properly, and they looked squeezed together. That led me to my next big challenge: layout and spacing.

---

## **CSS Troubles: The Never-Ending Battle with Alignment**

Once my HTML was in place, I thought adding CSS would be quick. But instead, I spent hours trying to get everything to align properly. Here are some of the biggest problems I faced:

### **1. Centering the Pricing Cards**
I wanted my pricing cards to sit neatly in the center of the page. I tried using `text-align: center;`, but that didn’t work because it only affects text, not entire divs. After many failed attempts, I finally learned that `display: flex;` was the solution:

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

This helped space out the cards evenly, but I ran into another problem…

### **2. Uneven Card Heights**
Each pricing card had different amounts of text (some plans had more features than others), which made some cards taller than others. That made the entire section look weird. I tried setting a `height` on the cards, but then the text overflowed when the content was too long. The best solution I found was using `display: flex;` with `align-items: stretch;`, which forced all the cards to be the same height:

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

That small fix made a big difference.

### **3. Button Alignment Issues**
I wanted the "Get Started" button to sit at the bottom of each card, but it kept shifting depending on the content above it. I tried using `position: absolute;`, but that didn’t work well because it made the buttons overlap other elements. The best approach was to use `margin-top: auto;`, which pushes the button to the bottom naturally:

.start-button {
  background: #00b289;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: auto;
}

Finally, the buttons aligned properly across all cards!

---

## **Spacing Nightmares: Margins, Padding, and the Box Model**

One of the hardest parts of this project was dealing with spacing. Every time I thought something looked right, it turned out that different screen sizes made everything shift unexpectedly. I kept adjusting `margin` and `padding`, but nothing seemed to work consistently.

I eventually learned that the **CSS box model** was the key to understanding spacing. When I added `border: 1px solid red;` to some elements, I saw that extra space was being added because of default padding and margins. The fix was to use:

* {
  box-sizing: border-box;
}

This simple line of code saved me from so many headaches!

---

## **Making It Look Good: Small Changes, Big Impact**

Once I fixed the layout, I focused on making the page look more polished. Here are a few small tweaks that improved the design:

- **Using Google Fonts** for a more modern look:

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
  body {
    font-family: "Montserrat", sans-serif;
  }

- **Adding a box shadow** to the pricing cards to make them stand out:

  .pricing-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

- **Hover effects** to make buttons feel interactive:

  .start-button:hover {
    background: #008f6b;
  }

These details made the pricing page look more professional.

---

## **Final Thoughts: Lessons Learned the Hard Way**

This assignment was much harder than I expected, but it also taught me a lot. Here are my biggest takeaways:

✅ **Layout is harder than it looks.** Aligning elements properly takes time, and small mistakes can make everything look messy.
✅ **Flexbox is a lifesaver.** Once I understood how to use it, positioning elements became much easier.
✅ **The box model matters.** Padding, margins, and borders can mess up spacing if you don’t control them.
✅ **CSS is frustrating, but rewarding.** I spent hours fixing small issues, but seeing the final result made it all worth it.

At the start, I struggled a lot. But by the end, I felt much more comfortable with CSS. I know there’s still a long way to go, but this project gave me the confidence to keep learning.

If you’re new to CSS like me, my best advice is: **be patient, experiment, and don’t be afraid to Google everything!**