Built with CSS grid, flexbox.

Community feedback

• 

  Brendan Hyde•330

  @hyde-brendan

  Posted over 3 years ago

  Hey, great job with this! A few comments that should hopefully help you out:

  • For the Document should have one main landmark and All page content must be contained by landmarks warnings, there's a couple of HTML elements that are treated as the "main landmark", including header, nav, main, and footer. For this particular page I would just wrap all your content in a <main> element to resolve that issue.
  • The Page must contain a level-one heading warning can also be easily resolved by changing your <h2> into a <h1>.
  • The Images must have alternate text error is for accessibility reasons with people viewing the page with a screen reader. Since the card images are mainly decorative, you can just add an empty alt attribute (i.e. alt="") to the <img> elements.
  • Including the header in the grid is interesting, but I would remove the top-most row and set the header padding to adjust, currently there's a large amount of whitespace at the top.
  • It's not required, but clamp() is a very neat function that can be used with font-size to have more dynamic font size changes based on the screen size. You can use it to make the same header increase in size when you're on the desktop view as opposed to the mobile view.

  Hope this helps!

  11

  Marked as helpful