Stats Preview Card using HTML5 and CSS (Flex)

Community feedback

• 

  Cody Lewis Zites•570

  @zitescodyPosted about 3 years ago

  Hi @iamcgs. Below is my suggestion!

  I would replace <div class="card"> and <div class="image"> with <article> elements. It makes your code much easier to read and more accessible! Article elements help divide your individual, self-contained content into distinguishable pieces.

  Your card and image <div> elements are two distinguishable pieces of your <main> content, so it'd best to include <article> instead of the <div> elements.

  Here is a great article I got my feedback from. I hope you find it helpful to!

  https://www.smashingmagazine.com/2020/01/html5-article-section/

  Please mark this as helpful if you benefitted from my feedback! Happy coding!

  Marked as helpful

  1

  ---

  

  Carla•420

  @iamcgsPosted about 3 years ago

  @zitescody thanks for your suggestion! It is really helpful.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout looks really great, the site is responsive as well but your breakpoint into mobile view is too early. At around 1100px, it is already showing the tablet/mobile view, desktop layout could use more of those screen-time. The mobile state looks great though.

  Cody Lewis Zites already gave feedback on this one, just going to add some suggestions as well:

  • It would be great to have a base styling of this:

  html {
    box-sizing: border-boxl
    font-size: 100%;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit
  }
  

  This way, handling an element specially its size will be easier because of the box-sizing

  • Avoid using height: 100vh on a large container like the body as this makes the element's height capped based on the viewport/screen's height. Instead use min-height: 100vh so that the element will expand if it needs to.
  • Using margin is not consistent enough to center a layout especially when it needs to be centered on y-axis. Instead you can remove the margin from the .card selector and on the body tag add these stylings:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  Remove as well the margin-bottom from your footer .

  • You could have used ul for the .stats selector since those are list of items that are inside it.
  • Each item inside the .stats are not really heading text at all. By making it one, those text doesn't really give information on what the section would contain as heading tag does. Using p tag on all of them would be great. But remember to first nest them inside li tags.
  • Lastly, just the breakpoint to be adjusted:>

  Aside from those, great job again on this one.

  Marked as helpful

  0

  ---

  

  Carla•420

  @iamcgsPosted about 3 years ago

  @pikamart Thanks for making some time to review my solution. I'll keep all your tips in mind for my next challenges :)

  1