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 card, Responsive design (HTML, CSS, media queries)

Grimm-N 150

@Grimm-N

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?

Overall, I'm quite happy with the result. It was an interesting challenge, and I think I managed to achieve what I set out to do. I’m really eager to get feedback on this work—any comments or suggestions would be greatly appreciated!

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

What was challenging? Well, adapting the mobile design turned into quite the adventure! It felt like playing a game where I was the character trying different strategies to find the ultimate solution. Imagine a game where every level is just tweaking image alignments and padding—except with fewer dragons and more CSS. It was both a fun challenge and a rewarding puzzle!

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

I'm looking for guidance on how to align images within a restricted visible area. Specifically, I need to know how to crop images in a specific part of the image, not just centered or aligned with the top or bottom edge. Any tips or techniques for this would be greatly appreciated!

Community feedback

Salva 250

@salva-it

Posted

Congratulations! I have a few suggestions for improvement:

It's better to start the design from the mobile version.

Use CSS variables (root) for color management.

To display images more optimally, use the <picture> tag in HTML.

For font sizes, using clamp() units is more efficient for responsiveness regarding font size.

You can use $ instead of the direct $ symbol to ensure that all browsers display it correctly.

good luck

Marked as helpful

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