Order summary component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some feedback for you if you want to improve your code.

  • You can use the CSS background properties on the body element to set the background without using a bg_img container.

  • You could use the CSS backgrounds properties to set the background:

  body {
    background-color:  hsl(225deg, 100%, 94%);
    background-image: url(./pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  

  The background property is shorthand for all the properties mentioned above:

  background: hsl(225deg, 100%, 94%) url(./pattern-background-desktop.svg) no-repeat left top/contain;
  

  References:

  • CSS background Property
  • Background property
  • Background-repeat (MDN)

  • Not all images should have alt text. The illustration-hero and music-icon are for decoration purposes only. In this case, you can add aria-hidden="true" to the element and leave the alt attribute blank.

    Adding aria-hidden="true" to an image will prevent it from being read by screen readers. This is useful when the image is purely decorative and does not convey any information that needs to be communicated to the user.

    <img src="./illustration-hero.svg" alt aria-hidden="true">
    

    You can read more about this here 📘

  • There is a debate about what is the best type of elements for this challenge, but in my opinion, the "change" element should be a button and not an anchor tag, because anchor tags are typically used to link to other pages or sections of a page, while buttons are used to trigger an action. In this case, the action is to change the plan of the order, so a button would be more appropriate.

  I hope you find it useful! 😄

  Happy coding!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .container on the page using flexbox, replace the height with min-height: 100vh;

  You forgot to give the body a background-image with a background-size of contain and a background-repeat of no repeat.

  You forgot to add a media query for this challenge, in the media query you only have to change the background-image of the body.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0