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 preview card

@carstenkoerner

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 worked with sass/scss for the first time and quickly got to grips with it. The additional features are great and I will always work with it from now on.

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

I used the picture element for the first time to work with different images depending on the view width. That was a bit tricky because apparently you can't use css classes for the different sources. I therefore worked with only one css class for the picture element and adjusted the different border radius in css with a media querry.

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

I don't need any help with this, but would like some opinions on separating css code into different css files. E.g. typography.css, resets.ccs and main.css. Do you think it makes sense to use several css files to have a better overview and structure, or is it rather not so welcome because...?

Community feedback

@wingedotter5

Posted

Yes, it is actually good practice to start breaking your code into smaller chunks. As the project progresses, it makes it easier to manage.

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