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

product preview page using flex and sassy css

HamzeKabi 100

@HamzeKabi

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?

  • Using scss features, I isolated variables and mixins, each in separate file.

  • Learned more about specificity, and how not to mess with it while writing media queries. In my previous project due to lack of enough knowledge about this topic, I had to use !important.

  • I loaded fonts from google fonts instead of loading them locally.

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

maintaining proper specificity for element throughout the project, specially while writing media queries. I learned how nesting in scss gets translated into css and how it affects specificity.

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

For this project I did not used grid, and only used flex. Is grid a better option regarding this project?

Community feedback

geomydas 1,060

@geomydas

Posted

Using grid/flex is the same on this project. It's just a matter of preference. If you're comfortable with grid, go with it. If you're comfortable with flex, go with it. If you're comfortable with both, go with one you have less experience on.

1

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