Responsive product preview card page unsing CSS
Design comparison
Solution retrospective
After making my website responsive design at FreeCodeCamp, I'm proud to apply all my knowledge about responsive designs to this project. As Programmers, we are destined to learn new things forever, thus there is always something that could be improved.
What challenges did you encounter, and how did you overcome them?It wasn't a challenge, but I saw myself learning more about Flexbox and good ways to apply it.
What specific areas of your project would you like help with?I'd appreciate any feedback, there are always a few bugs hiding from our eyes.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here is some feedback to further improve your code:
- This component requires the use of two images 🎑 at different breakpoints ⚠️. The
picture
element will facilitate this.
Here is how it looks like implemented: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
- Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
- 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
s
element and inside it you will add aspan
element with anvisually-hidden
class that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎆🎊🪅
Marked as helpful1@ivandro-netoPosted almost 2 years ago@vcarames Thanks for your tips, I'll study this implementation. 👌
1 - This component requires the use of two images 🎑 at different breakpoints ⚠️. The
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