Order Summary Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • To properly center your content to your page, you will want to add the following to your body element (this method uses CSS Grid):

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  More Info:📚

  [Centering in CSS][https://moderncss.dev/complete-guide-to-centering-in-css/]

  • To not only improve your HTML’s code but to identify the main content of you page, you will want to wrap your entire component inside the Main element.

  • The “illustration” and Music Icon serves no other purpose than to be decorative; they add no value. Their alt tag should left blank and have an aria-hidden=“true” to hide it from assistive technology.

  • You are overusing the section element , a simple div with a proper class will do for the individual components inside your main component.

  • The only heading in this challenge is the ”Order Summary". Every other text should wrapped in a paragraph element.

  • The “Cancel Order” was created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The anchor tag will achieve this.

  • A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.

  Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.

  https://www.joshwcomeau.com/css/custom-css-reset/

  https://meyerweb.com/eric/tools/css/reset/

  http://html5doctor.com/html-5-reset-stylesheet/

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Renee, You have done a good work! 😁

  Some little tips to improve your code:

  • add margin:0 to body to remove the side scrool bar of the browser
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the header container of image
  • remove all margin from .container class because with grid they are superfluous
  • use flexbox to the body to center the card. Read here -> best flex guide
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  0