Product preview card component main

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello @Essensity-dev!

  Your project looks great!

  I have a suggestion about your code that might interest you:

  📌 You can use the <picture> tag when you have different versions of the same image.

  Using the <picture> tag will help load the correct image to the user's device, saving bandwidth and improving performance.

  Example:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  I hope this helps!

  Other than that, excellent work!

  Marked as helpful

  0

  ---

  

  Essencell•50

  @Essensity-devPosted 7 months ago

  @danielmrz-dev How can I do it if the image is too big?

  0
• 

  Cyuzuzo Bienvenu•220

  @bienvenudevPosted 7 months ago

  Hi @Essensity-dev!

  This is looking good! Here are a few suggestions that might make things even better:

  • For non-decorative images, consider using descriptive alt text like "Front-End Mentor QR Code" to improve accessibility for screen readers.

  • 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/

  • Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.

  • Similar to width, avoid setting a fixed height on your main. This ensures the content can adjust to different content lengths.

  • As @danielmrz-dev mentioned 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/

  • 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 are helpful! Feel free to ask any questions you might have and happy coding!

  0