Skip to content
Submitted 8 months ago

Product Preview Card Component Solution

Bailey Fryeā€¢90
@baileyfrye1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Daniel šŸ›øā€¢44,310
    @danielmrz-devPosted 8 months ago

    Hello @baileyfrye1!

    Your project looks great!

    I have a suggestion about responsiveness:

    šŸ“Œ You can use the <picture> tag when you have different versions of the same image.

    Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

    Example:

    <picture>
    <source media="(min-width: 40em)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

    I hope this helps!

    Other than that, excellent work!

    Marked as helpful
    2

Please log in to post a comment

Log in with GitHub

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