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

Responsive Perfume card using HTML and Css(SASS)

DoneWithWorkā€¢ 160

@DoneWithWork

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?

  1. Writing responsive css that scales quite well
  2. Looks very close to the design

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

  1. Ensuring the design looked all right
  2. Making sure responsive design look good + media queries

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

  1. How can I improve my Css
  • should I make use of clamp() ?
  • any other tips and trickes, really appreciate

Community feedback

Mahmoodā€¢ 1,070

@MahmoodHashem

Posted

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

Well done on completing the challenge! āœ…

I must say, your project looks fantastic!

Here's a helpful suggestion for you:

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

This can ensure that the appropriate image loads on the user's device, which can save bandwidth and improve performance.

For instance:

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

Explanation:

  • The <source> element specifies the image source and the media query that determines when this source should be used. In this case, the desktop image will be used when the screen width is at least 768 pixels.
  • The <img> element is the fallback option for browsers that don't support the <picture> element. It specifies the mobile image source and the alternative text that will be displayed if the image cannot be shown.

I hope you find this tip valuable!

Keep up the excellent work!

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