Skip to content
Submitted 9 months ago

Responsive product preview card using sass

sass/scss
nodegreecode•390
@nodegreecode
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am happy to finish this challenge, which took me so long actually because of moving to a new apartment. I am proud to implement not only Sass but build the component based on 7-1 file system architecture, which was pretty challenging as there were several updates in the Sass preprocessor and also BEM methodology in order to organize my classes/elements.

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

I'v spent a lot of time figuring out how the "jumping" image inside flexbox container can be fixed. At the end, I'v added a couple of media queries, and it works.

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

I can help with implementing new Sass features like @use and building parametrized mixins.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Erika Peterson•90
    @erika-codes

    Hi! Your solution looks good overall. Remember to use semantic HTML, like <main>, <section>, etc. Be sure to always use descriptive words in your img alt attribute. So, instead of just "product image", it is better to describe what the image actually is. I hope this helps! You're doing great!

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