Design comparison
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @CharlieCastleWeb 👋, good job on completing this challenge! 🎉
I like this solution for the challenge. Here are some suggestions you might consider to improve your code:
- Setting element width and height with percentages or VW/VH will cause your component to behave weirdly on mobile devices and high-resolution desktops.
- Instead of using pixels in font size on the body element, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - You could use the <del> tag to display the old price:
<del class="old-price"> <span class="sr-only">Old price: </span>$169.99 </del>
Note that I added the <span> with the
sr-only
class to thedel
element, this will provide more information about what your old price is about.The
sr-only
class is a class that you can add to hide content visually but is only visible to screen-readers.Overall, Good job
Marked as helpful1 - @VCaramesPosted about 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
-
The purpose of the Main Element is to identify the main content of your page. It is not the container of you component. After the main element, you want add a container to wrap you separate components in.
-
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
-
The only heading in this challenge is the name of the perfume, “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a Paragraph Element.
-
Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
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, let me know.
Happy Coding! 👻🎃
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord