Skip to content
Submitted over 3 years ago

Order Summary using HTML, CSS, and Flexbox

Tamera•110
@tlbodrick
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

Hi, thanks for any and all feedback you have.

This one was a bit of a struggle after taking a break from my first one - I tried using ems, though unsure how I feel about my own implementation of them and whether they were useful or not. I used the native mac Preview app to get all of the sizes right but found it a little finicky and inexact.

I only used Flexbox for the annual plan section, though I'm wondering if there might be an easier way to lay out elements in a row with custom positioning. Actually, now that I say positioning, I'm wondering if I should've used it rather than padding to push elements away from each other. Hm!

All in all, a fun exercise and I'm trying out new things and trying to find the perfect workflow for me.

Please let me know what you'd streamline/do differently or more efficiently and what aspects you think I should work on.

Community feedback

  • Aryan Pandhare•65
    @aryan2000spPosted over 3 years ago

    Congratulations on completing this challenge, your solution is good the but you need to add box-shadow for the Proceed Payment button and also the button should not be bigger than the Annual Plan section, basically they should have same width. Other than that your solution is excellent.

    1
    Tamera•110
    @tlbodrickPosted over 3 years ago

    @aryan2000sp I completely forgot about the box shadow and you're totally right about the button sizing. Thanks for the catch!

    0
  • dewslyse•3,025
    @dewslysePosted over 3 years ago

    Hello Tamera! Congrats on completing your second challenge. Looking good. You may want to add a no-repeat to your background. You could also add aria-hidden: true to your <img> for improved accessibility since they don't have alt values.

    I think the best approach for the annual plan section is with flex and flex properties. You can easily position the elements using the property justify-content: space-between. I did same in my implementation.

    0

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