Order Summary Card - Easier challenge made with plain CSS.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Carlos Guzman!

  💪That's a great goal! Good luck with your journey!

  Anyway, I have some feedback on this solution:

  • The card has full width and almost full height on mobile view (360px * 640px). You can add padding to your body element to prevent the card having full width on small screen sizes.
  • For all decorative images, you should leave the alt="" and add aria-hidden="true" or role="presentation". In this case, all images are decorative only.
  • I don't think, you need a picture tag, since it's just one single img. picture is useful for multi resolution images, like image for desktop and mobile.
  • Annual Plan should not be a heading. If you think this is important, I recommend to use strong tag. Heading tags usually use for titling a section.
  • Also, it for the order-name, I recommend to use ul and to wrap each item, you can use li.
  • I recommend to make all elements have box-sizing: border-box, by doing this, it will prevent the elements from adding width when you add padding.

  * {
    box-sizing: border-box;
  }
  
  /* OR */
  html {
    box-sizing: border-box;
  }
  
  * {
    box-sizing: inherit;
  }
  

  • Use rem or sometimes em unit for setting a max-width too. It will make sure when the user trying to scale their browser, everything will get bigger or smaller.

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Carlos Guzman•285

  @guztrilloPosted over 3 years ago

  @vanzasetia Hi Vanza Setia, cool name. I appreciate you took the time to review my code. I agree with all your feedback (yep, I forgot the box-sizing: border-box, lmao) and I will update my code to follow your recommendations.

  Thanks, it was really helpful.

  0