Simple code for "Order-summary-component"

Community feedback

• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hi gucio586, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
  • You have used <br> , using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element. This can be a confusing and frustrating experience for the person using the screen reader. You can read more in MDN.

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @gucio586, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

  Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%, Here’s the code with the modification and the image applied as background:

  body {
      background-size: contain;
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      font-family: 'Red Hat Display', sans-serif;
      font-size: 16px;
      display: flex;
      align-items: center;
      min-height: 100vh;
      background-color: hsl(225, 100%, 94%);
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  gucio586•50

  @gucio586Posted about 2 years ago

  @correlucas I didnt notice there is a wave in the background. Thank you.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

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

  • 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.

  • 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.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0