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

Code for product preview card component

PalHamza 20

@PalHamza

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


Can someone check this code's structure for my project. It works, but I am not sure is it right. I would be thankful for any suggestions and advices.

Community feedback

Tux3er 760

@Tux3er-Isma

Posted

Hi PalHamza!!!

Congrats for completing this challenge and also for your cool code 👍🏻🎉

*I have reviewed your code and I will give you some tips for your next project 💡:

  • Put an icon in the html head. There is an example <link rel="icon" href="frontendmentor.jpg">

  • I recomend you to put a css reset in your css file. I recomend you this css reset, normalize.css 🎨

  • In css you can put variables! It isn't obligatory but css with variables is awesome. There is some documentation 📖 and some practice.

  • In your img container, inside put an img. Like this: <img src="image.jpg" alt="Perfume">

  • Put some hover effects in your btn (button). You can get this by putting :hover in the button selector

  • I recomend you to put BEM css in your code. This will make your css code easily to read. There is a video 📹 explaining BEM

  • Also put some media-queries in your css code. Video 📹

I hope this tips will be helpful to you in the future!!! 👍🏻😉

Happy Coding PalHamza ⌨️🖐🏻

0

PalHamza 20

@PalHamza

Posted

@Tux3er-Isma THANKS A LOT for this much advices. I really appreciate this!!! THANKS 😃😃.

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