Skip to content
Submitted 2 months ago

Order Summary Component with HTML/CSS

SunnyFGC•130
@njmoon21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of how fast I was able to finish compared to the other challenges. From now on, I should be spending more time BEFORE coding, planning/understanding how the whole layout works and how I should approach a certain challenge.

What challenges did you encounter, and how did you overcome them?

As of writing this and looking at the live URL site on GitHub, for some reason the background image svg is not working?

I didn't really struggle with anything other than the payment plan container with the music note, price, and change link. I was trying to figure out how to format the elements with the flex display, and I ended up grouping the music icon and price into one div rather than having them separately.

What specific areas of your project would you like help with?

Once again on every solution I submit, it would be much help if anyone would point out any issues in my HTML semantics or the way I name my classes.

Also, let me know if there were any more efficient ways to go about making this elements. For example, the last project that had a button, I ended up using a div element instead of a button element, which was not optimal.

Community feedback

  • P
    Huy Phan•3,420
    @huyphan2210Posted 2 months ago

    Hi @njmoon21,

    I’ve reviewed your solution and wanted to share some thoughts:

    • Consider using a <section> tag for .wrapper__information-section instead of a <div>, as the class name suggests it's a distinct section.
    • .payment__container might also work better as a <section>, and .payment__plan-section could be a <figure> with .payment_plan as its <figcaption>.
    • The .payment__change element doesn’t seem like a heading, so wrapping the anchor <a> tag in an <h2> might not be necessary. The <a> can stand alone.
    • For your <button>, it’s good practice to specify type="button" to clearly define its behavior. There's another type="submit" which is for form, but that's for another time.
    • "Cancel Order" seems better suited as a <button type="button"> rather than an anchor <a> since it doesn’t navigate anywhere. - However, if you intended it as a link, keeping it as an <a> works too.
    • Lastly, the .attribution section could be better represented with a <footer> instead of a <div>.

    Hope this helps!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord