Mobile-first solution using CSS Grid

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchell

  Posted almost 5 years ago

  Hi Simon. This is a really close implementation of the design!

  I don't claim to be an expert on HTML semantics, but from my own experience and research here's what I'd suggest:

  Imagine there was no styling whatsoever - what would this information look like in, say, a MS word doc?

  You'd probably want "Join our community" to be your main heading (<h1>). You should have exactly one <h1> on a page.

  It's great that you're using <section>s, but you only have one and it's immediately inside <main>, so at best it's serving no real purpose, and at worst it could be confusing because one section implies the existance of others (which there aren't!).

  I would make the outermost div of each box into a section tag and give it an appropriate heading level:

  h1 - join our community h2 - monthly subscription h2 - why us

  I wouldn't make "30 day..." a heading because it doesn't directly relate to the content beneath it. Just because text is big, bold or eyecatching doesn't mean it's a heading! It took me ages to decouple those in my head!

  Lastly, I'd be tempted to represent the content in the 2nd and 3rd sections as unordered lists, since they'd make more sense that way than as prose.

  21