Social links profile page using flexbox

Community feedback

• 

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  hi there! 👋

  I packed up a couple of tips for after looking at your code:

  HTML:

  • for SEO and accessibility, all content within the body should be wrapped inside milestones. these milestones are the header, main and footer tags. for a project like this use at least a <main> tag.

  • for the same reason your <a> tags should be placed into a <ul> and <li> tags and not <div> tags:

  <ul>
      <li><a href="">Github</a></li>
      ...
  </ul>
  

  CSS:

  • don't apply width or height to your elements, it kills responsivity, let the child elements determine these dimensions. If you really want to control your element's dimension use max-width or min-width along with the width property, but using relative units for it instead of pixels:

  .card {
  width: 90%;
  max-width: 40rem;
  }
  

  in this case the .card element will take up 90% percent of the parent container' width, but when it reaches 40rem in width it stops expanding any further.

  Hope this was helpful 🙏

  Good luck and happy coding! 🙌

  Marked as helpful

  1

  ---

  

  elliot•30

  @e-liaszPosted 5 months ago

  @kodan96 Thank you so much for taking the time to go through the code and point these out! It is much appreciated and I will surely take my time to improve on these in the future 🙏

  1