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 Using Sass Challenge

@anggaanugrah

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


This is the completion of my first challenge by Frontendmentor.io 😁 Please help me to improve my skills by giving your feedback. Thanks πŸ™

Community feedback

S MD sulemanβ€’ 3,530

@sulemaan7070

Posted

hey Angga Anugrah Pratama πŸ˜„, congratulations on completing the first challenge, and really great job making the site look very accurate to the design πŸ’―πŸ’―.The only thing that I can point to you for improvement is.

  1. I see you have only utilized the desktop image on both screens. You can find the image-product-mobile.jpg in the images folder.
  2. and using the picture element is best practice this is how you use it. where you will be able to change the image based on @media queries.
<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

find more about picture element here and keep up the great work happy coding πŸ”₯πŸ”₯

Marked as helpful

1

@anggaanugrah

Posted

@sulemaan7070 thank you for the feedback you provide, the information and knowledge you provide is very useful for me, and I will try it in my previous code πŸ™πŸ˜„

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