Learning Web Development, Day 11 — The Pricing Page

08 Apr, 2026

Today has been a hell of a productive day already. It's 19°C (66.2°F — thank you, little Python script!) and sunny, I put a lot of laundry out, I went to aqua aerobics (where I discovered that I'm still allergic to pool chemicals, and tried very hard to not sneeze while moving around), and bought some fresh lavender plants to replace all the ones that died while I was undergoing my cancer treatment (it's hard to water plants when you don't want to leave your bed).

What can I do to make it even more productive? Apparently, building a pricing page in my terrrrrrible Bootstrap project!

02 — Bootstrap Project 2

Okay, yesterday was not terrible. It was a lot of nice CSS, all Bootstrap-free, all beautiful, I loved it, I was happy.

Today, I kind of have a feeling that a chunk of this is going to be heavy on the Bootstrap, because this is, like, its main purpose — making mediocre sales pages for mediocre businesses.

But what the hey. Maybe I'll be pleasantly surprised.

04 — Build A Pricing Page

One thing I forgot about yesterday but is still slightly confusing me...

Why would you put in both text-center and align-items-center into a field? Like, surely align-items-center will do the work of text-center?

This time around, though, we're just using text-center. I don't know why we need a separate <div> for this, though:

<div class="pricing-header text-center">
  <h2 class="display-4">Pricing</h2>
</div>

And then you put the actual pricing into <div class="container">? Where's all your fancy naming structure now?

Making product pods is nice, because that I understand, but, man, it just has to be so much more complicated with all the <div>s, doesn't it?

There is one thing I definitely don't like in this section. The instructor has us using <small> for a previous price.

No, that does not feel right. That feels icky. Just style it with CSS or something.

But here's my product pod, just as they want it.

<div class="pricing-header text-center">
  <h2 class="display-4 text-white">Pricing</h2>
</div>
<div class="container">
  <div class="card-deck mb-3 text-center mx-1 px-1">
    <div class="card shadow-sm">
      <div class="card-header">
        <h3>Sale</h3>
      </div>
      <div class="card-body">
        <h3 class="card-title pricing-card-title text-dark">
          £49.99 
          <small class="text-muted">
            Regularly £499.99
          </small>
        </h3>
        <ul class="list-unstyled">
          <li>Lifetime Access</li>
          <li>Certificate of Completion</li>
          <li>Project-Based Curriculum</li>
          <li>Gold Star Saying You Tried</li>
        </ul>
        <button type="button" class="btn btn-lg 
        btn-block btn-outline-primary">
          Buy Now
        </button>
      </div>
    </div>
  </div>
</div>

Another thing that is making me narrow my eyes a bit is that <button>. I mean, okay, absolutely great, we're finally using a dang button and not an <a> pretending to be one, but jeez, how many times can you include a variation of the word "button" in a single <button>?

05 — Style The Pricing Page

I thought we were styling the pricing page before, what with all the classes we were putting in, but what do I know, huh?

Considering that this video is all of three minutes long, I just got to watch the instructor remove the mx-1 and px-1 from the card-deck div and add some padding to the <h2>.

Positively riveting.

Day 11 — Results

Bootstrap does have a card-deck class that lets you set up product pods very easily.
Each card in the deck has a card-header and a card-body.

Yeah, okay, I didn't learn that much this time, but, hey, I got a little further through this, and I only have six more videos to get through before I finish this course completely.

Build A Checkout Page
Build A Billing Information Section
Build Address Selection Fields
Build Payment Information Fields
Build Card Information Fields
Add Fine Tuning

Heck, I might just knock all of those out tomorrow and then spend Friday on an entirely new course.

Wish me luck!

Today's Sticker

An illustration of Laura Palmer from Twin Peaks, doing the "Meanwhile" hand gesture, which is where the right hand is held up, the palm towards you, and the left hand is slightly curved underneath the right.

Laura Palmer with her "Meanwhile" hand gesture.

I got this at EM Con last year, but, unfortunately, I don't remember the name of the artist. I do love it. And, hey! It's been 36 years since Twin Peaks premiered on ABC!

Today, the BBC Archive released this Facebook reel where they were talking Twin Peaks two weeks after it started airing. Enjoy!

#kate learns web development #programming