Flexbox Stats Card Component

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @hannyfish. I prefer CSS Grid for the general page layout to readable code. I also know that flexbox is an easy option, but when I use @media-queries, flexbox will be hard to read and understand. I have some suggestions for you.

  The HTML Structure

  • You definitely don't need to use span tag instead of div. span is an inline element. You shouldn't use it like a div. You should use semantic elements or div tags for the grouping and styling of its child elements. You should correct this. That's why you got these errors in your HTML validation report.

  • You can use strong instead of b for more semantic meanings of your code.

  • You should use h1 tag once on your web pages for the hierarchy. You can use h2-6tags limitless.

  • You also don't need <h2>companies</h2>. Keep it simple and use just p tag for the text.

  The CSS Structure

  • Your design is not responsive. You don't need to give height and width values to your elements. You can give max-width or min-width your wrapper or parent element. Then you can set the container's width and height values with child's contents and padding-margin values. That's why we use flexbox. Flexbox makes everything fluid easily.
  • Never worries. It's a good solution and you'll get step by step to perfect solution.
  • For more readable code, you can use multiple lines instead of one line in your CSS file.

  Check some good solutions and implement them into your code.

  I hope these will help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0