Design comparison
Community feedback
- @HassiaiPosted almost 2 years ago
add the alt attibute with a value of null
alt= " "
to the icon img tag to fix the error issue.To center .hero on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Give the img a width of 100%.
Give .hero display: flex instead of inline flex and give it a width value . give sec_a nd .sec_b a width of 50%
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The image’s
alt tag
description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This component requires the use of two images 🎑 at different breakpoints ⚠️. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
- The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a
paragraph
element.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
1@VCaramesPosted almost 2 years ago- Currently, the old price (169.99) 🏷 is not being properly announced 😢 to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
- Your
CSS Reset
is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.
Here are some examples that you can freely use:
1@packerpotPosted almost 2 years ago@vcarames Thanks a lot; your suggestions are helpful for me, but you mentioned a property called "css reset." I've never heard of this property, which may be because I'm still learning CSS.
1@VCaramesPosted almost 2 years ago@packerpot
Glad I could help!☃️
A
CSS Reset
is more of a group of several properties that help in ensuring your site looks the same in each browser, it’s helps speed up the web development process by not having to always write repetitive code, and you can always add more to it.Create a stylesheet with the
CSS Reset
and anytime you create a new project, just copy and paste the file.Keep it up!
1 - The image’s
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