Building an Order Summary Card with HTML and CSS: A Beginner’s Guide 🚀

Hi, everyone! 👋 I recently built an Order Summary Card as part of a UI design challenge, and I wanted to share my process, learnings, and snippets of code with you. If you’re a beginner looking to improve your HTML and CSS skills, this project is a great starting point! Let’s dive in.

Here’s a draft blog for your project that you can post on Dev.to or Medium:

Building an Order Summary Card with HTML and CSS: A Beginner’s Guide 🚀
Hi, everyone! 👋 I recently built an Order Summary Card as part of a UI design challenge, and I wanted to share my process, learnings, and snippets of code with you. If you’re a beginner looking to improve your HTML and CSS skills, this project is a great starting point! Let’s dive in.

💡 What’s an Order Summary Card?
An Order Summary Card is a common component in e-commerce and subscription-based websites. It displays details about a plan or product, along with actions like proceeding to payment or canceling the order. Here’s what my version looks like:

🛠️ Tools I Used

For this project, I kept things simple:

• HTML5 for structure
• CSS3 for styling
• Google Fonts for custom typography

🏗️ Step 1: Structuring with HTML

I started by creating a semantic structure for the card using HTML. Here’s the basic layout:

<main class="red-hat-display-regular">
  <div class="order-summary-container">
    <div class="order-image-header">
      <img src="./images/illustration-hero.svg" alt="Order Summary Hero" />
    </div>
    <div class="order-details-container">
      <h1 class="red-hat-display-bold">Order Summary</h1>
      <p class="summary">
        You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!
      </p>
      <div class="plan-container">
        <div class="price">
          <img src="./images/icon-music.svg" alt="Music Icon" />
          <div>
            <h5 class="red-hat-display-bold">Annual Plan</h5>
            <p>$59.99/year</p>
          </div>
        </div>
        <a href="#" class="link">Change</a>
      </div>
      <div class="button-container">
        <button class="pay">Proceed to Payment</button>
        <button class="cancel">Cancel Order</button>
      </div>
    </div>
  </div>
</main>

Why I Used Semantic HTML
I used the <main> tag to improve accessibility by identifying the primary content of the page. Each section is wrapped in meaningful tags like <h1>, <p>, and <button>, making the structure both semantic and user-friendly.

🎨 Step 2: Styling with CSS

I created a visually appealing design with CSS variables for consistency and easy customization. Here’s an example of the key styles:

CSS Variables for Consistency

:root {
  --light-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  --pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --dark-blue: hsl(223, 47%, 23%);
}

Centering the Layout

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: var(--light-blue);
  background-image: url("./images/pattern-background-desktop.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  background-position: top;
}

Button Styles

.pay {
  background-color: var(--bright-blue);
  color: white;
  border: none;
  border-radius: 10px;
  height: 46px;
  cursor: pointer;
}

.cancel {
  color: var(--desaturated-blue);
  border: none;
  border-radius: 10px;
  height: 46px;
  cursor: pointer;
}

🤔 Challenges and Solutions

Challenge 1: Centering the Card
Positioning the card in the center of the page took some trial and error. I ultimately used display: grid with place-items: center to achieve a perfect layout.

Challenge 2: Font Rendering
Initially, my custom font didn’t render correctly. After re-checking my setup, I realized I had missed specifying font weights in my CSS. Adding this fixed the issue:

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700;900&display=swap');

🛠️ What I Learned

• Semantic HTML: Using proper tags like and makes the content more accessible.
• CSS Variables: They simplify design changes and promote consistency across the project.
• Grid Layouts: display: grid is incredibly powerful for centering elements and creating flexible layouts.

If you’re interested in trying this yourself, check out the https://www.frontendmentor.io/. Happy coding! 🚀

You can see the whole code here: https://github.com/drishti1920/Frontend-Mentor-Challenges/tree/main/order-summary-card