Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product preview card using HTML/CSS

@abigbroomstick

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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