Mobile-first solution using CSS Grid

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchellPosted about 4 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.

  2

  ---

  

  Simon Hernandez•615

  @simonhernandezPosted about 4 years ago

  @markup-mitchell Hi Mark!

  I'm so grateful to you for sharing such a detailed feedback. I appreciate it a lot!

  I really liked the way you explained the proper use of each tag, specially the headings!

  I will definitely take each of your valuable suggestions into account for my future markups.

  Thanks again for helping me become a better Dev!

  0