HTML and CSS Solution (Flexbox)

Community feedback

• 

  P

  Øystein Håberg•13,220

  @Islandstone89Posted about 1 month ago

  Hi, congratulations on finishing another challenge!

  I have looked through your code, and I'm happy to see you having a lot of progress - keep it up :)

  Here are a few bits of advice:

  HTML:

  • <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

  • A better alt text for the image is "Headshot of Jessica Randall".

  • I don't think role="list" is needed on the <ul>, since it has that role by default.

  CSS:

  • Remember, the body needs a min-height instead of height, as we want it to grow with the content.

  • On the card, replace min-width: 20rem width max-width: 20rem.

  • Instead of margin-left: 1.5rem and margin-right: 1.5rem, you can write margin-inline: 1.5rem. This is more efficient, and you're also using logical properties, which is recommended. NB: On second thought, I would remove the margin on the card and replace it with padding on the body - 16px or 1rem works well.

  • Remove width: 100% on .profile-card__header - a <div> is a block element that takes up its parent's full width by default.

  • I don't see a need for media queries in this project. Whenever they're needed, they must be in rem or em instead of px.

  Marked as helpful

  1

  ---

  

  P

  Mattzic•50

  @MattzicPosted 27 days ago

  @Islandstone89 Thanks mate, still a lot to learn!

  1
• 

  P

  socratesioa•340

  @socratesioaPosted about 1 month ago

  I like the way you approached the css part of the challenge. It looks pretty nice! Good job!

  1