Profile Card Component

Community feedback

• 

  Fancy•320

  @maciejkrol18Posted over 2 years ago

  Overall nice job i really like the stat counters going up however there's place for some improvements:

  • The card is too big, i would lower the width.
  • The cards height is fixed, you should avoid setting a fixed height on certain elements, in this case it causes problem such as making the flex container wrapping the stats overflow the card
  • I would hide the overflow (apply overflow: hidden to body)
  • The stat boxes are misalinged (not on the center) on lower screen sizes
  • In your CSS, you applied box-sizing: border-box only to the HTML tag - this doesn't make everything get the desired box sizing. You should apply it to every element in your site with*,*::before,*::after { box-sizing: border-box; }
  • I don't know why you used transform functions instead of a simple margin on some elements. In the .info class for example - why not use margin-top: 5rem; instead of translateY(-5rem) ?
  • You created a ::after pseudoelement to get the profile pictures border when you could've just applied border to the image itself. It's way less messy and it won't be misalinged like it is right now.

  Some of the things i've found, there's a lot more to do but you'll improve as you finish more challanges and learn more while doing so. I hope my criticism will help you. Happy coding

  Marked as helpful

  0

  ---

  

  David Alejandro Cuastumal Bucheli•100

  @DcuastumalPosted over 2 years ago

  @FancyBaguette Thank you very much for your recommendations, I will implement them in the code to see how they work, again thank you very much and happy coding

  1
• 

  Ukwueze Harrison Chukwuebuka•20

  @HalezisPosted over 2 years ago

  Hey, David. Big ups for completing this project. I was just working on it, but couldn't find my way around making the top and bottom background look like in the design. So your solution came just at the right time, helped me complete it. Also loved the life you gave it using JavaScript.

  Cheers. Happy coding!

  Marked as helpful

  0

  ---

  

  David Alejandro Cuastumal Bucheli•100

  @DcuastumalPosted over 2 years ago

  @Halezis007 I am very glad that you liked my code and it helps you a little to guide you. Happy code!

  0