Order summary component

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 2 years ago

  Hi, I hope this feedback helps

  1. There should be some space aroubd the card at all times. This is hitting my screen edges. You could add a little margin to the component or a little padding to its wrapper
  2. This is one component, meaning it is only one chunk of meaningful content. It cannot have a header element (that is a banner landmark on a page that should sit outside of main and it's purpose if for content that repeats on every page). And it should not have a section inside. This whole card could be one section if you wanted but there is no semantic benefits to doing that

  3. not necessarily a problem but can you explain why you've chosen the interactive elements you have done for change, proceed and cancel? What do you expect to happen on click of each of these? Do you understand the key differences between anchors and buttons, and when each should be used?
  4. you don't need a paragraph inside a button (I'm not even sure that would be valid html tbh)
  5. CSS looks good to me. The only things if consider changing are the inline-margins in the plan box. Id recommend using gap there and flex-grow on the middle item. I'd also consider adding in flex wrap as a defensive style for if/when text sizes are enlarged and the content may not fit on one line'.
  6. consider setting the max width in rem instead of pixels on the component
  7. consider making the top image width 100% instead of setting explicit px width in a media query

  03

  Marked as helpful
• 

  Faisal Ahmed•410

  @faisalahmed11

  Posted about 2 years ago

  @Thewatcher13, your submission is greatly appreciated, and you are right on the learning progress, that reduces the difficulty level. and finally, I would say <p> tag is the clear winner and an easy way to go in this situation.

  01