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

@Ghosthard117

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Salva 250

@salva-it

Posted

Very well done! Congratulations. Your code is well-structured, and just a few small changes can improve its performance.

Instead of using @import in the CSS file, you can use the Google Fonts link in the HTML file.

Using <picture> and relative units can help improve performance and responsiveness.

To display images on different devices, use the <source> tag in the <picture> file. This allows you to load different images based on the user device's characteristics (such as screen width). The browser decides which image to load and display based on conditions (e.g., screen size). Using this tag ensures that only the appropriate image is downloaded, which helps improve loading speed and user experience.

You can use $ instead of the direct $ symbol to ensure that all browsers display it correctly.

Consider adding a transition for the mouse hover to allow the color change to happen smoothly.

good luck

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