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 component

@Yashi-Singh-1

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’m proud of the responsive design and consistent styling achieved in this project. Next time, I’d focus on adding advanced CSS animations and incorporating JavaScript for enhanced interactivity.

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

I’d appreciate help with advanced CSS animations, JavaScript integration, and performance optimization.

Community feedback

P

@wolf2lyon

Posted

Your design is fine with respect to the measurements provided by the challenge, but you can give more details on other devices, for example I saw that in cell phone sizes of 260px it loses a bit of focus given that the size of the card is a bit large and I have to scroll to read all the information. Also note that on larger devices the design is not correctly centered but apart from that everything is perfect.

Marked as helpful

1

@Yashi-Singh-1

Posted

@wolf2lyon

Thank you for your detailed feedback. I appreciate your observations regarding the design. I will take your suggestions into account and adjust the card size for smaller screens to ensure it maintains clarity and readability without excessive scrolling. Additionally, I’ll address the centering issue on larger devices to improve the overall presentation. Your input is invaluable in refining the design.

Best regards, Yashi Singh

0
JL10 250

@JLizcano10

Posted

Excellent!!! I could only tell you not to forget the recommendations for responsive images and practice how to use the picture tag.

Marked as helpful

1

@Yashi-Singh-1

Posted

@JLizcano10

Thank you for your valuable feedback. I had initially considered using the <picture> tag, but I’ve decided to opt for another approach for this project. I will definitely keep your suggestion in mind for future projects. I truly appreciate the time you took to provide your input.

Best regards, Yashi Singh

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