blog-preview-card-main

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  Hi there, here are some suggestions.

  HTML:

  • You need a <main>, this is important for accessibility. You should use the appropriate semantic HTML elements whenever needed. Instead of <div class="main">, use the <main> element.

  • You don't need srcset on the illustration image.

  • This card doesn't have any footers, so I would remove all of those.

  • The profile image is a meaningful image, and should have descriptive alt text.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • The body does not need a width: 100% - since it is a block element, it has a default width of 100%.

  • height needs to be min-height, so the content has room to grow if needed.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Remove the fixed width on the card. If needed, add a max-width in rem to prevent the card from getting too wide.

  1

  ---

  

  MHAMED OUZED•130

  @Mohda24Posted 11 months ago

  Hi @Islandstone89 thank you so much for this informations and advices i realy appreciate

  1