Stats preview challenge

Community feedback

• 

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  Hey there 👋,

  Congratulations 🥳! To be honest, you really did superbly 😃! I liked the way how you used the ::before pseudo-element to give the image a purple overlay, which itself was a great idea, hats off on that 👏. I'm glad you enjoyed doing the project the most as enjoying while making your own portfolio/design as it also matters 😊.

  Here are small recommendations which can further improve your code and make it easier for you to work with the code.

  Centering Elements

  Since your container class is a flexbox (that is using display:flex), you can use it to center your elements

  .container {
      /*   Your Code   */
      display: flex;
  		
      /*   New Addition   */
      align-items: center;      // Centers horizontally
      justify-content: center;  // Centers Vertically
      min-height: 100vh;        // Captures full-screen height
  
      // Note: it is recommended to use min-height since it is a good practice
  }
  

  Now you can remove the below code from your CSS file without any worries and it will show the same result!

  body {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% , -50%);
  }
  

  Check this video out on how to use Flexbox Editor on chrome directly: https://github.com/AcmeGamers/stats-view-Kariman/blob/main/Flexbox.mkv

  Media Queries CSS Duplicity

  I noticed that you are using the same properties in media queries. Although you really don't need to specify the properties again, you can just define them once and it will show the result you want 🙂. Let me explain you this through an example:

  /*  This is a normal H1 heading with a color and a background   */
  h1 {
      color: red;
      background: blue;
      font-size: 40px;
  }
  
  /*  Now if you do this  */
  @media screen and (max-width: 425px) {
  
      h1 {
          font-size: 26px;
          // This way, only font-size will change.
          // And the color and background will remain the same.
          // Also works with ::before and ::after pseudo elements 😀
      }
  		
  }
  

  Commenting

  In addition, I would recommend making comments in your code, it will help you recognize the part of your code faster when you are working with larger projects. Here's an example:

  HTML

  https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_2778.png

  CSS

  https://github.com/AcmeGamers/sunnyside-shihab/blob/main/Screenshot_3560.png

  I hope these few tips help you to make your code better and make you more productive. Hoping to see your future success and amazing work as always, best of luck 😃!

  Marked as helpful

  1

  ---

  

  Kariman Medhat•170

  @KarimanMedhatPosted over 2 years ago

  @AcmeGamers Again a lot of thanks for your advice and effort I used them all in my current project...when I use flex-box to centering elements I didn't know the min-height property so It makes it much easy for me especially since I prefer Flex-box rather than transform property.😀

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @KarimanMedhat Awe, I'm glad to hear that it is useful for you to be honest, and same, I also prefer Flex-box! :D

  1