
Responsive product preview card using HTML/CSS
Design comparison
Solution retrospective
I'm proud of learning some new tools such as BEM, visual hidden (aka sr-only) and pseudo-class is() to make my code cleaner. I tried the mobile-first approach this time and maybe next time I'll come back to using desktop-first workflow.
What challenges did you encounter, and how did you overcome them?I'm not used to using variables yet but I'm slowly getting there. The hardest part was writing the price tag so it will be screen reader friendly. I learned how to do that using visually-hidden property that would show the original price and current price without interfering with the general design.
What specific areas of your project would you like help with?I could use some feedback on the styling and spacing!
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