Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Product Preview Card Component Solution

sass/scss, webpack, bem
Bailey Frye•90
@baileyfrye1
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am most proud of forcing myself to use SCSS more and getting more comfortable with the current webpack/SCSS file structure and work flow that I'm using. I am more easily able to debug any issues that arise with my webpack setup and feel like I have more flexibility in how I set up my projects. I went with a mobile first design which made this project much easier since I only had to worry about the one media query and didn't have to change any of my grid settings to make it responsive for mobile.

What challenges did you encounter, and how did you overcome them?

I initially started this project many months ago so when I came back to finish it I had to review my previous code and ended up changing quite a bit of things that I didn't deem necessary anymore. I struggled largely with getting the image and the body text to be symmetrical but was happy with how it turned out in the end.

What specific areas of your project would you like help with?

I would like for everyone to check my responsiveness as much as possible. I still feel like a lot of my code is very redundant, over-complicated, and a bit inefficient. If anyone sees more efficient ways for me to tackle some of the layout I would absolutely love to hear it.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Bailey Frye's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License