Submitted over 1 year ago

Responsive Product Preview Card Component

JackoWill• 40

@JackoWill

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What did you find difficult while building the project?

I really found it difficult when making it responsive to the desktop version and trying to match it exactly with the finished result. I think i need to learn a lot more about grid and media queries as it was my first time building a responsive layout.

Which areas of your code are you unsure of?

Im not sure whether I have used grid in the right places or not, and if my media queries are correct.

Do you have any questions about best practices?

I would love to hear some peoples thoughts and ideas on how i could approach a project like this in a more efficient way. I am also unsure how i should structure my root folder on GitHub for these projects. Still learning how to commit properly and use git and GitHub in general, its still a bit confusing. Kind regards, Jacko

Community feedback

Alex Garcia 🦝 Garcialexco• 440

@garcialexco

Posted over 1 year ago

Hello, congrats on completing this solution!

While I was working on this project, the biggest challenge I had was making it responsive as it was my first responsive project as well. Seems 'em',, 'rem' percentages or using anything scalable for your sizes makes it more accessible, and you definitely got that down pat. Your media queries look excellent!

Grid is a lot of fun, you definitely got the hang of it! The only thing I can see is that you have a couple redundant uses of 'display: grid' on lines 35 and 58 of your CSS. Since you already set it in your body, the rest of the elements should inherit it.

Great job! Here, take this interesting post on Reddit regarding CSS flex for your future coding adventures! https://www.reddit.com/r/webdev/comments/10ffo7a/css_flex_for_speed_learners/

Happy coding and great job on your solution!

Marked as helpful

JackoWill• 40

@JackoWill

Posted over 1 year ago

@garcialexco Hey, thank you!

Awesome thanks for the tips I will fix that up right away! I will give that post a read also.

Kind regards, Jacko

Please log in to post a comment

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