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 solution

@JakobTimmermann

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


Still new to this and learning a lot every time but I am quite alright with this design. Integrating and resizing the svg was quite difficult. I guess the code (especially css) could be leaner.

Community feedback

Account Deleted

Hello I've one suggestion for you to improve your solution.

  • use Art direction element rather than using "CSS" as a way for displaying image in a different media-query because Art direction is the most suitable way for displaying an image.
<picture>
// in the "media" if the query hit the end point example min-width: 520px.
// the end point is hitted.
// the image file path you put in the "srcset" will be displayed in the webpage
// otherwise the file image in the "<img/>" will be displapyed

  <source
     srcset="[image file path]"
     media="[media quries end point]" 
     alt="[image title]"
   />
       
   <img src="./assets/image-web-3-mobile.jpg" />
</picture>

Marked as helpful

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