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-card-component

P
Tuna Ertenā€¢ 220

@tunaerten

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 not very familiar with media queries, but I am trying to learn. I have gained a bit more understanding in this project. What I did not fully understand in the project was the difference between the width shown in Figma and the width I see on the screen. Nevertheless, I achieved a fairly close result. I set a specific height, but I am not very happy with it.

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

I am not sure whether I should use the values in the design file exactly as width and height, or if I should evaluate them myself.

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

0

P
Tuna Ertenā€¢ 220

@tunaerten

Posted

@danielmrz-dev Thank you for your comment. To be honest, I didn't think using two consecutive img tags made much sense while writing the code, but I wasn't aware of the method you suggested. I also saw it while reviewing others' code in the same project. Frankly, I did some research to understand what it was. Additionally, knowing that using it this way positively impacts performance is great. I will pay attention to this in my future projects. Thank you.

1
LucasJCFreireā€¢ 260

@LucasJCFreire

Posted

Good Job! Its is perfect.

Marked as helpful

0

P
Tuna Ertenā€¢ 220

@tunaerten

Posted

thank you!@LucasJCFreire

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