Results summary component solution

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @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 rule to properly center the component.

  ---

  body {
    min-height: 100vh;
  }
  

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

  #boxes {
    margin-top: 10em;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  BODY MEASUREMENTS 📐:

  • The max-width: 1440px property for body is not necessary. because it's a block level element which will take the full width of the page by default.

  ---

  • So feel free to remove max-width: 1440px style rule from body this will help you to write efficient code and makes your code more reusable.

  ---

  .

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

  Happy coding!

  Marked as helpful

  0
• 

  Doston Nabotov•950

  @dostonnabotovPosted over 1 year ago

  Hi, there

  Congrats on completing your challenge. Here are some suggestions I would like to make:

  • To make your code cleaner and robust, use CSS custom properties to avoid repetition. For example, saving your color palette in variables can help speed up your performance writing code.
  • Avoid using #id selectors in your CSS. The id attributes are most commonly used for JavaScript. Stick only with classes. It will help you in the long run.
  • There are several ways of centering techniques. But, what I consider a good practice is with the grid:

  .element {
      display: grid;
      place-items: center;
  }
  

  If you see no effects, try setting height or min-height values.

  • hsla(241, 72%, 46%, 0.678). As 0.678 for the alpha value, it seems like you are going for the pixel-perfect design. Personal preference, of course. But, I wouldn't suggest doing so.
  • Finally, check out Kevin Powell's video on YouTube and see how he did this challenge. Trust me, you will learn a lot from him.

  Good luck on your coding journey!

  Marked as helpful

  0