My solution for this challenge

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 6 months ago

  Hi Mahmoud, well done!

  Here are some suggestions:

  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>.

  • Remove the <span> elements, they are not needed. Images shouldn't be wrapped in a <span>, and "Learning" "Published" and "Greg Hooper" are all <p> elements.

  • I would use the <time> element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • Change the alt text on the profile image to "Headshot of Gary Hooper".

  • .attribution should be a <footer>, and you should use <p> for the text inside.

  CSS:

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

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as the body takes up the full width of the viewport by default.

  • Remove the width on the card - to make components responsive, we should rarely 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.

  • font-size on the footer must also be in rem.

  • On the top image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  0