product-preview-card-component-main CSS FLEXBOX
Design comparison
Solution retrospective
Challenge solution carried out using CSS and Flexbox. I had doubts about the use of semantic html when developing the challenge. Because in the challenge, from my point of view, there is no field that would be the header, just a section and the footer. When in doubt, I chose not to use semantic html. If you could clarify this issue for me, I would be very grateful. p.s.: This is my second completed challenge. I'm quite excited.😁
Community feedback
- @MelvinAguilarPosted about 1 year ago
Hello there 👋. Good job on completing the challenge !
-
In this challenge, where you're working on a component rather than a complete webpage, there may not be many opportunities to use many semantic HTML elements. However, it's essential to consider some suggestions:
I'd like to point out that you've missed one significant semantic landmark in your solution: the
<main>element. The<main>element is used to indicate the main content of a document, and it's a crucial part of semantic HTML. All your content, including the section, should be placed inside the <main> element to better represent the structure of a webpage.
- The product image is not a decoration. You must not use the background-image property to add the product image. Instead, use the
<img>tag to add the image. Use the background-image property only for decorative images that do not add any information to the page.
-
You could use the
<del>tag to indicate the price that was before the discount. Additionally, you can use asr-onlyclass to describe the discount. This will help screen reader users to understand that the price was discounted.Example:
<del><span class="sr-only">Old price: </span>$169.99</del>
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
0@AntonielAurelianoPosted 12 months ago@MelvinAguilar Thank you very much for the feedback, I have already applied your tips to other projects. I'm happy for people like you to share your knowledge to help others. Thank you very much and good luck to you. 🖖
0 -
- @pmigixPosted about 1 year ago
You've done a great job! One thing I'd suggest is adding the breakpoint at
max-width: 768pxinstead so that the product-image doesn't slide under your product-description.0@AntonielAurelianoPosted 12 months ago@pmigix Thank you very much for the feedback. I hadn't thought of that as a solution to this specific problem. I will change it soon. All good for you. 😁
0
Please log in to post a comment
Log in with GitHub
Join 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