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

Alaa Gaberā€¢ 160

@3laagaber

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 challenges did you encounter, and how did you overcome them?

It is the first time I have used Bootstrap did I use it well?

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 with <source> with the other version.

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>

You're currently using the desktop version image for both desktop and mobile versions.

Hope you find this useful!

Great job overall!

Marked as helpful

0

Alaa Gaberā€¢ 160

@3laagaber

Posted

@danielmrz-dev Thanks, Daniel your tips are helpful and constructive, If you have more tips feel free to say it.

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