HTML and SCSS Order Summary Component Page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Temitope!

  👍 Good job on completing your first challenge!

  Regarding to your question: I used background-image on the body element for the background-pattern. In my opinion, it's much easier to control the size and switch the background-pattern between the desktop and mobile version, by using @media query. Also, since it's just a decorative image, so it's the best choice to use background-image.

  Feedback:

  • Development code is not a production code. I recommend to delete all commented code, since they were a part of code development code.
  • For any decorative images, you should leave the alt="" and add aria-hidden="true" to make sure all screen readers ignore those images.
  • For the file path, I recommend to use / forwardslash instead of \ backslash. Backslash is commonly use to escape characters.
  • Always wrap text in a meaningful element like paragraph, heading, and etc. It's important for accessibility.

  <div class="plan">
     <span>Annual Plan</span>
     $59.99/year
  </div>
  

  • Use rem or sometimes em instead of px. Using px won't allow the user to control the size of your page based on their needs.
  • For the media query unit, I recommend to use em. It's simply because, **the only unit that performed consistently across all four browsers is em. ** You can check this blog post about "PX, EM or REM Media Queries?" to learn more.
  • On my mobile view portrait mode (360px * 640px), the content inside the card is overflowing. The reason for that is because, you set the height of the card using vh. I would recommend to remove the width and the height property and use max-width and max-height instead.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Temitope Pinheiro•260

  @Temi-pinheiroPosted about 3 years ago

  @vanzasetia Thank you so much Vanza, this was really helpful, I will try to incorporate all your feedback and it will reflect in my future project. I will also update the code base of this solution.

  0