Profile Card Component

Community feedback

• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  🛠️

  keep improving your programming skills

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ don't use tag selectors. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  ✅ place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads.

  ✅ use code formatters for structuring your code. It’s very important. As programs get more complex, they get harder and harder to understand - and at some point you can’t even understand code that you yourself wrote without being able to re-read it. Good style makes reading code a pleasurable and consistent experience.

  ✅ You Should Stop Using Pixels. They are static and aren’t truly relative to the root font-size like REM and EM units

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0

  ---

  

  Kenzar•70

  @Kenzar-SanPosted over 2 years ago

  @isprutfromua Thanks for the help, trying to use more REM and EM units than Pixels, still using sometimes. Will try adding the imports on the HEAD tag to make easier.

  0
• 

  Luis Dourado•100

  @LutefdPosted over 2 years ago

  Don't worry! Those issues can be fixed with a bit of reestructuring:

  • In the image card you have to set it as display: block; width: 100%;
  • Also you must check the position of the divs, the upper wrapper is spaning the whole container, I don't know if that's by design, but both the upper wrapper and the bottom wrapper aren't really doing much and could be deleted, just move the font-family to the body
  • It would be better as well if instead of displaying the body as flex you used grid, you could then subsititute the margin: 0 auto with a place-items:center.
  • The problem with the size could be solved by removing the min-height from the container and stablishing a minmax in the width
  • You can also remove the padding of the container and put a padding and then padding-top: 0 in the info-section, that will remove the white border all around the card

  Marked as helpful

  0

  ---

  

  Kenzar•70

  @Kenzar-SanPosted over 2 years ago

  @Lutefd Thanks for the help, managed to fix the image size changing some lines.

  0