@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
- The
headerelement is not needed for this challenge.
- The “illustration” and Music Icon serves no other purpose than to be decorative; they add no value. Their
alt tagshould left blank and have anaria-hidden=“true”to hide it from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- The only heading in this challenge is the ”Order Summary". Every other text should wrapped in a
paragraphelement.
- Your
CSS Resetis being underutilized. To fully maximize it, you will want to add more to it.
Here are some examples that you can freely use:
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
- For improved accessibility 📈 for your content, it is best practice to use
emformedia-queries. Using these 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! 🎄🎁
Marked as helpful
@Fanou59
Posted
@vcarames Hi バレンタイン,
Thank you for your feedback :) I made some change based on your feedback.
I need to dig the difference between [rem] and [em] because i don't understand why is better to use [em] for media-queries. i thought that [rem] have a link with the size defined at the [*] so for me i must use [rem] in my media queries.
Thank you, Steph
@VCarames
Posted
@Fanou59
Glad I could help!☃️
rem is a CSS unit relative to the font size of an html.
em will inherit font-size value from the parent element
This article will explain in detail why em is the best option for media queries:
https://zellwk.com/blog/media-query-units/
Keep it up!
Marked as helpful
@Fanou59
Posted
@vcarames Thank you :)
I'll use it for my next challenge :)
