DEV Community

Drishti Saraf
Drishti Saraf

Posted on • Edited on

2 1

Order Summary Card 🚀

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.

order-summary-image

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>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

🤔 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');
Enter fullscreen mode Exit fullscreen mode

🛠️ 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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more