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 using Flexbox and Media Query

Pennyβ€’ 160

@YeongOh

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


Where do you find the cart icon?

I had to use Material Icon since I couldn't find the exact one.

Feedback welcome.

Community feedback

Tux3erβ€’ 760

@Tux3er-Isma

Posted

Hi YoengOh!!!

Congrats completing this challenge πŸ‘πŸ»πŸŽ‰

There are some tips for your next project πŸ’‘:

  • If I don't remember the icon was in the img folder that frontend mentor gives to you

  • I recomend you to use css reset. There is an example of a good css reset normalize.css 🎨

  • Try to use cursor: pointer in the button and also transition to get a better user experience

  • In variables you can also put colors. If you want to change for example the color put: color: var(myVar);

That's all. You have done a good work πŸ˜‰

I hope this comment will help you in your next project πŸ‘πŸ»

Happy coding YoengOh!!!! βŒ¨οΈπŸ–πŸ»

Marked as helpful

2

Pennyβ€’ 160

@YeongOh

Posted

@Tux3er-Isma Hi! thanks for the comment. It is very helpful. I rushed so much forgot there was icon and mobile image in my image folder haha. The screenshot is not showing my image properly compared to live demo site, is this because I did not use normalize.css?

0
Christianβ€’ 970

@FLCHRIS

Posted

Hi... congrats on completing this challenge. πŸ₯³πŸŽ‰

Here some tips to improve your code:

HTML: 🧱

You can use the <picture> tag for this challenge. The picture tag helps us provide versions of the same image but in different resolutions, saving bandwidth and speeding up load times. More info here

Your solution is very good, good job! πŸ’―

Happy coding! βœŒοΈπŸ™ƒ

Marked as helpful

1

Pennyβ€’ 160

@YeongOh

Posted

@FLCHRIS I will keep in mind! Thank you so much!

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