Order summary component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • The background image is missing, you will use the background-image property to implement it.

  • The “illustration” and "music icon" in this component are purely decorative. ⚠️ Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  MDN Aria-Hidden

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

  • The web development process can be made easier and expedite the process 🚀 by implementing a CSS Reset. Here are some examples that you can freely use: Josh Comeau Reset, Eric Meyer Reset

  • For improved accessibility 📈 for your content, it is best practice ✅ to use em for media-queries. Using this unit gives users the ability to scale elements up and down, relative to a set value.

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

  Happy Coding! 🎆🎊🪅

  0

  ---

  

  Daniel•100

  @dnoracPosted almost 2 years ago

  @vcarames Thank you for your feedback.

  After careful consideration, I have implemented the following changes:

  • Add background image (swap URL on breakpoint)
  • Remove alt text and add aria-hidden="true" to the decorative illustration and music icon
  • Replace the h2 tag for a paragraph tag on the Annual Plan text
  • Use em unit for the media query breakpoint

  As for the CSS Reset, I will consider using it on my next challenge executions.

  Thanks again, Daniel

  0