stats preview card component with HTML and CSS

Community feedback

• 

  Fahim Mahmud•165

  @FahimMahmudJoyPosted about 3 years ago

  Hi there, great work! A few suggestions:

  • You have way too many divs in your html and without any comment, it's really hard to track which one is which. You can easily get rid of those surrounding <h1>, <p> etc. since headings and paragraphs are block level by default and don't need additional div around them to style.
  • I see that you have used somewhat bootstrap type approach for the stats with a row, col type. However, declaring them as an unordered list makes more semantic sense I believe.
  • For the Google fonts, use link stylesheet in the html file rather than import because it's faster.
  • You can center the card with body {display: flex; min-height: 100vh; justify-content: center; align-items: center}. Keep this in mind, it has saved me a ton of headache to get things centered.
  • Have a look at the typography. Your paragraph font-size is quite small.
  • You can make the card a bit smaller to match the design.
  • And regarding media queries, you can Google or YouTube a bit too find out more. It'll make your site look great on all devices. Never give up and as always, happy coding!

  Marked as helpful

  0

  ---

  

  bima suci•35

  @bimasuci18Posted about 3 years ago

  @FahimMahmudJoy Thanks a lot mate for the advice,your advice and support really helped me👍

  0
• 

  Juveria Dalvi•1,375

  @Juveria-DalviPosted about 3 years ago

  Hey..😊 So the accessibility issue says you should have <main> tag which is a semantic tag, wrap your all divs inside the main tag except for the div with class attribution that should be wrapped in <footer> tag

  Marked as helpful

  0

  ---

  

  bima suci•35

  @bimasuci18Posted about 3 years ago

  @juuveria thanks for the advice bro👍

  1