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 card using HTML & SCSS

P

@sergrosu

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 used this project as an introduction into SASS. It took me a little longer, as I became familiar with SCSS syntax, but it worked perfectly in the end.

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

I couldn't center the card vertically - nothing seemed to work. I tried both flex and grid. In the end, I realised I had missed to set html & body height to 100%. Once added, it worked perfectly.

Community feedback

@AReactDeveloper

Posted

sass is a powerful tool design looks good well done , later when you work on bigger projects you can experiment with partials and putting sass on separate files really helps me a lot you can also put variables resets and base code for your application in partials

0

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