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

responsive product project card

@elsayedelbauomy

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


What are you most proud of, and what would you do differently next time?

my hard work

What challenges did you encounter, and how did you overcome them?

prduct responsive project

What specific areas of your project would you like help with?

how i could change the imge to be responsive from html

Community feedback

@bienvenudev

Posted

Hello!

Good job!

Here are a few suggestions that might make things even better:

  • Please pay attention to units you choose to use (ex: lvh). Make sure you know why you chose them.
  • Em should be a very intentional choice when you specifically want a property to scale with that element's font size. Make sure you're using it intentionally here.
  • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
  • You don't have to put on a media query to change an image, instead you could use the picture tag in html and let the browser load the desired image. Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/
  • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).

Additional resources:

  • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

Happy Coding!

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