Blog preview card

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 6 months ago

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a <main>.

  • Replace the id with a class.

  • You don't need to wrap the top image in a <figure>.

  • "Learning should just be a <p>, without <span> or <strong>.

  • The heading would have a link as this is a blog card.

  • A better alt text for the profile image would be "Headshot of Gary Hooper".

  • "Greg Hooper" is a <p>. If it was a heading, it could not have been a <h5>, as headings must always be in order.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

  • Remove the positioning and transform properties on the card. It's better to center it using Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove the width on the card. It is not recommended to set fixed sizes in px.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • I would use rem instead of em on font-size.

  • Add display: inline-block on "Learning", so it doesn't take up the full width.

  Marked as helpful

  0

  ---

  

  Ramazan Karatay•100

  @RamazanKrtyPosted 6 months ago

  Hi @Islandstone89 ! That's a great report. Thank you very much. I'll implement it as soon as I can. Best regards

  1
• 

  pablodev•430

  @PabloodevPosted 6 months ago

  what's up dude!

  I took a look at your codes, but I had difficulty understanding your documentation, maybe you should put into practice the documentation of your codes, being an important part of a developer when we research someone we always look at the documentation, the README file always helps with this, I entered on your website that you created to sell clothes and I thought it was incredible, but, again, there is no documentation, I hope this tip helps you, good coding!

  0

  ---

  

  Ramazan Karatay•100

  @RamazanKrtyPosted 6 months ago

  Hi @Pabloodev ! Thank you for your comment. Some of my uploads are very old and I didn't add detailed descriptions for them, maybe I should reorganise them. Thanks for the suggestion, though.

  0