responsive product project card

Community feedback

• 

  Cyuzuzo Bienvenu•220

  @bienvenudevPosted 7 months ago

  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