html, css, flexbox solution

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 4 years ago

  This is great for 1 week in, well done! Here are my tips to improve:

  • Instead of a large margin-top on your card, just have a little padding on the outer wrapper (in this case the body element) so content can't hit the sides. Give that body a min-height of 100vh and the card will be centered on the scene
  • Don't forget details like box shadow on the card. There are some good box shadow generators out there that can help you get it looking right
  • On card background, you don't need width. It's a block element already. Instead of height in percent, try a min-height in rem
  • Similar for the card. You don't need to give it width or height. It will be more easily responsive if you give it width 100%, and a max-width of whatever in px/rem. That will let it shrink down for small phones. Height is not needed.
  • Alt text is a good effort on Victor's image, but waaaay too long. Just Victor Crest is fine. It's an image of him, that's all the info we need to know.
  • If you want to horizontally center with margin, you can do that with margin left and right set to auto rather than a pixel value
  • You're relying on default margins on elements for vertical spacing at the moment. That means your solution will look different in different browsers. Consider adding a modern css reset to remove all those defaults, then add vertical margins to elements as needed (top tip - it's often more manageable if you add margins in one direction mainly, like margin top on each paragraph, heading etc, rather than setting both directions)
  • The stats section needs semantic HTML adding. You never want to have text in spans/divs alone. Try swapping container-rates for a ul, then each child within it can be an li.
  • I think you've set align items and justify content the wrong way around on that container-rates element too - maybe check that.
  • remove the brs. Use CSS to set elements to display block instead
  • Add text align center to the stats. I'd also remove margin from them or at the very least use the same class on all three of them.

  Keep on going - that's loads of suggestions for you to be looking up 😂. Just take your time and learn step by step. Good luck 👍

  13

  Marked as helpful
• Account deletedPosted about 4 years ago

  Hello , ellienndea

  Congratulations on completing your first challenge. Your solution looks good 👏

  Have fun coding.

  11
• 

  P

  Patrick•14,265

  @palgramming

  Posted about 4 years ago

  Good Job so far but I would try to work on your styling for your horizontal line. Otherwise good start to this challenge

  03