Stats preview card component flexbox

Community feedback

• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  .center {
  min-height: 100vh;
  align-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  .center {
  margin-top: 10px;
  }
  .card {
  margin-top: 100px;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0
• Account deleted

  Hello Coder your code is fantastic😊

  And congratulations on successfully completing an another newbie challenge✨

  And for you I have a small recommendation that might be helpful for you

  <h1> tag :

  It is mandatory to use a <h1> tag in your solution because <h1> tag is most important aspect in accessibility and it helps screen reader to navigate with your page in easy way

  And H1 tags also help Google to understand the structure of a page. So if you're using H1s as Google recommends for your page title or content heading, your H1 is effectively telling Google “here's what my page is about.

  Semantic tags :

  The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read. It has greater accessibility. It offers a better user experience.

  And the also help to reach a wider range of audience

  And if you wonder why you need to use semantic tags in your solution you can check out this

  Hope I might be helpful ☺️

  0