Stats Preview Card - using Flexbox and Grid

Community feedback

• 

  Bernard•195

  @BernardanxietyPosted over 3 years ago

  Just to clarify, im a complete beginner just like You trying to learn just like You but what i can already see is not that relevant to the look of it but to semantics of Your html. 10k+, 314 and 12M+ definitely shouldn't be h1s, there should only be 1 h1 per page. On top of that, i didn't do that myself but the "Get insights..." itself shouldn't be a h1 but rather a h2 and those that i mentioned earlier should be like h3s as the challenge is like a section of a whole page i think.

  2nd, just an idea, i think You can separate the card into 2 divs, the text and the image and give each 50% of the width of the container so You have more space for the text, see how Your bottom stats are stuck together? If You had more space, You could use flexbox to space them out.

  1
• 

  Jade•105

  @jadetruePosted over 3 years ago

  Hey Bernardanxiety! Thanks for the comment and feedback I really appreciate it.

  I am aware of that in this particular piece and if I were to implement this into a project/full page website, it would definitely be h3's (IMO).

  Just another tip from beginner to beginner, with Heading Tags, you will want to bear in mind what you would like search engines to pick up - I found a useful article on this too: https://cultofweb.com/blog/multiple-h1-heading-tags/.

  I'm not sure if you clicked on the Live link but my stats aren't squished up against each other and I am using Grid to display these with plenty of space between similarly the widths look better than in the screenshot too.

  0

  ---

  

  Daniel•35

  @danielczukPosted over 3 years ago

  Hi @jadetruexo! I think this article makes sense a lot in cases of commercial use. However, it's still theoretically wrong to use multiply h1s and you should avoid that while writing semantic HTML. And even if you'd want to use them, in my opinion, these numbers aren't so important for SEO as the main heading, which basically describes the service. I also think that nesting .card in .section was unnecessary as you could just style body and html. I'm sure it's not wrong, but it's an additional code. I hope I've helped. Happy coding!

  1

  

  Jade•105

  @jadetruePosted over 3 years ago

  @danielczuk thank you! I guess it's all scenario-based - I will take the feedback into projects going forward and also I have updated my solution with h3s! Yes, I agree with you on the .card and .section - I changed something last minute there and didn't look at it after thanks for spotting that :)

  1

  

  Bernard•195

  @BernardanxietyPosted over 3 years ago

  @jadetruexo Lol i might have forgotten to click the live link? Wow, indeed they are good, nice job then!

  1