Responsive order summary component using CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hello! This looks really good overall, you've done a great job

  Here's some more feedback :)

  • use a css reset to remove default styles on things like buttons. I'm seeing a strange border on the proceed btn. These can vary a lot between browsers, so always worth including a reset
  • A reset would also set images to be display: block which is definitely a good idea. They are inline-block by default and that's what's causing a tiny bit of extra space under your image at the moment.
  • think about what should be a button vs what should be an anchor tag. Anchor tags are for navigation and buttons are for actions (like toggling content, submitting a form...). What do you expect 'proceed' to do? Because I doubt it would be a button.
  • use margins for spacing vertically on elements inside the card, not <br>s
  • reduce the card content padding a little on mobile
  • decorative images like that music icon should have empty alt alt=""
  • Annual plan and the price should not be in one paragraph. They are distinct items of content. I would have annual plan as a heading and price as a paragraph
  • Similar to above, should 'change' be an anchor tag? (That may be right, or maybe not, all depends on what your interpretation of this design is - what would you expect to happen?)

  Have fun learning more

  Marked as helpful

  1

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @grace-snow Thanks grace for yet another detailed feedback! Having fun learning from you!

  0
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @Mabchir, You’ve just about got it.

  Marked as helpful

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @optimusprime202 Thanks a lot for the encouragement!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  Hi, Mariem! 👋

  Congratulations on completing this challenge! 🎉

  It's also good to know that you have put some time to write the README. I would suggest making the sketch.png in portrait mode. Currently, it's hard for me to see the sketch though. 😅

  Some feedback from me:

  • Accessibility
    • Good job on wrapping all the card content with main landmark! 👍
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Also, the alternative text for images should not be hyphenated. It's should be human-readable instead.
    • Some resources to learn about the alternative text.
      • Axess Lab | Alt-texts: The Ultimate Guide
      • Images Concepts • WAI Web Accessibility Tutorials
    • <b>Annual Plan</b> Use strong element instead of b. b has been deprecated (not recommended to use anymore).
    • Don't use br elements for presentational purposes. Read what MDN documentation says about it.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Best Practice (Recommended)
    • I would recommend removing the !important flag from the title element. I think margin: 0; should be enough.
    • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
    • Keep the CSS specificity as low and flat as possible.

  I hope this helps! Happy coding! 😁

  Marked as helpful

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @vanzasetia Thanks so much for you specific feedback ! so so helpful ! thank you for the resources as well

  1
• Account deleted

  Hi there 👋

  Congratulate on finishing your project 🎉. You did a great job 💡

  I give some suggestions to help you take your project design to the next level 📈😉

  • Add this code to .confirmation button

  border: none;
  cursor: pointer;
  

  • Add some box-shadow to the card

  Happy coding ☕

  Maqsud

  Marked as helpful

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted over 2 years ago

  @maqsudtolipov Thanks a lot for your time and feedback ! loved the suggestions

  0