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

JamesYcodeā€¢ 140

@JamesYcode

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 am proud to complete this without too much trouble. Although it is slightly different than the design provided. I feel this is more visually appealing.

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

The problem I encounter was the image element. In the beginning I used img element tag but then ran into responsive issue when in larger viewport. In order for me to overcome this, I used the image element tag in mobile viewport and background image on desktop viewport while hiding the image element tag.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hey there! šŸ™‹šŸ½ā€ā™‚ļø

Congrats on finishing the challenge! āœ…

Your project looks awesome!

Here's a tip that might interest you:

šŸ“Œ When you have different versions of the same image, consider using the <picture> tag.

This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance.

Example:

<picture>
    <source media="(min-width: 768px)" srcset="{desktop image path here}">
    <img src="{mobile image path here}" alt="{alternative text here}">
</picture>

Hope you find this useful!

Great job overall!

Marked as helpful

1

JamesYcodeā€¢ 140

@JamesYcode

Posted

@danielmrz-dev

Great tip! Thank you!

1
Kai0Leeā€¢ 30

@Kai0Lee

Posted

I just have some comments on the visuals - overall, I think your design looks nice as well - I just think if you added some rounded edges on the card it would look a little better (for laptop view). The mobile version looks good. I think your code is readable and your design does look good on different screen sizes.

Marked as helpful

1

JamesYcodeā€¢ 140

@JamesYcode

Posted

@Kai0Lee

Thank you for your feedback and tips! I have added the round edges for tablet, laptop and desktop. It does look better!

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