Accessible Product preview card component

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  0

  ---

  

  P

  Kelechi Ogbonna•20

  @KellsworkPosted about 2 months ago

  @Stroudy This was helpful, thank you.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @Kellswork, You smashed this challenge to be fair, I struggled to find any feedback my limited knowledge could give, I'm glad it was helpful. See you around 💪

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @Kellswork, I'm looking for some points for the wall of fame would greatly appreciate it if you did find it helpful to mark it, Thanks bro!

  0

  

  P

  Kelechi Ogbonna•20

  @KellsworkPosted about 2 months ago

  @Stroudy, Sure

  1
• 

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  If you want to make your card responsive with ease you can use this technique:

  .card {
  width: 90%;
  max-width: 37.5rem;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  Marked as helpful

  0

  ---

  

  P

  Kelechi Ogbonna•20

  @KellsworkPosted about 2 months ago

  @MikDra1 I did, thank you!

  0
• 

  Caio Azevedo•270

  @justCaioDevPosted about 2 months ago

  Nice work!

  I liked your semantic HTML 👌

  1

  ---

  

  P

  Kelechi Ogbonna•20

  @KellsworkPosted about 2 months ago

  Thanks @justCaioDev

  0