Skip to content
Submitted 8 months ago

product-preview-card-component-main

P
Davy•320
@DavyZane
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I have no experience with responsive design. I watched Kevin Powell's video of doing this challenge, followed it step by step until I successfully completed this challenge myself. For the next challenges, I will reuse the techniques I just learned without any help - I hope.

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

The main difficulty encountered was that of responsive design, it is the first time that I use media queries. The second difficulty encountered consisted in coding dynamically so that each design detail adapts from one position to another. Example: the CSS function overflow: hidden; allows me not to force border-radiuses at the corners of the image, these being positioned in different corners depending on the size of the screen. Most of the tips I have learned come from Kevin Powell's video.

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

At this level of difficulty I mostly need to practice, but any feedback is welcome 🙏.

Code

Please log in to post a comment

Log in

Community feedback

  • stephany247•730
    @stephany247

    You’ve done a fantastic job stepping into responsive design for the first time! Following a tutorial to learn is a great approach, and it’s awesome that you applied concepts like media queries effectively to make your design adaptable across screen sizes. I’m especially impressed with how you handled image borders dynamically depending on the screen size—it shows that you’re already thinking about flexibility in your layouts.

    Moving forward, I’d recommend experimenting with fluid layouts using percentages or rem/em units to make your designs even more adaptable without relying too much on fixed values. You might also want to explore CSS Grid or Flexbox for even more control over the layout, especially for complex designs. Additionally, trying a mobile-first approach could simplify your process as it ensures that you prioritize the design for smaller screens first and progressively enhance for larger ones.

    It’s clear that you’ve learned a lot from this project, and I encourage you to practice future challenges without external help so you can strengthen your problem-solving skills. Great work so far, and I look forward to seeing how you build on these techniques in your next project!

    Marked as helpful

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