Submitted 4 months ago
Responsive product preview card using HTML/CSS
@abigbroomstick
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
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