blog-preview-card-main

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 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 the "main" section of a page. Since the card is the only "main" content in this challenge, the <main> can also act as the card - change .container into a <main>.

  • All images must have alt text. The illustration is decorative, so the alt text should be empty: alt="". The profile image has meaning, and needs proper, descriptive alt text, something like "A headshot of Gary Hooper".

  • "Learning" is not a button - it could be a <p>, <a> or a <span>, depending on how you interpret the context of the card.

  CSS:

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

  • Since you are not using the "attribution", you should delete its styling.

  • Do not set fixed widths or (especially) heights - the content should always determine how tall a component is. Remove the width as well - you only need a max-width in rem, so the card doesn't get too wide on larger screens.

  • Remove the width on the image. Add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  • As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

  0