Social links profile using HTML and CSS

Community feedback

• 

  P

  Øystein Håberg•13,280

  @Islandstone89

  Posted 6 months ago

  Hey, good job!

  To improve your solution even further, I would apply the following changes:

  HTML:

  • A better alt text would be "Headshot of Jessica Randall".

  • Since this is a list of links, I would change .card-links from a <div> to a <ul>:

  <ul class="card-links">
          <li><a class="card-link" href="#">GitHub</a></li>
          <li><a class="card-link" href="#">Frontend Mentor</a></li>
          <li><a class="card-link" href="#">LinkedIn</a></li>
          <li><a class="card-link" href="#">Twitter</a></li>
          <li><a class="card-link" href="#">Instagram</a></li>
        </ul>
  

  • Change .attribution to a <footer>, and use <p> for the text inside.

  CSS:

  • Make a habit of including a modern CSS Reset at the top of the stylesheet.

  • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

  • On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport.

  • Add gap: 2rem on the body, to create some space between the <main> and the <footer>.

  • Remove the properties on .container, they are not needed.

  • Except for the profile image, remove all widths and heights in px. We rarely want to give a component a fixed size, as we need it to grow and shrink according to the screen size.

  • We do want to limit the width of the card, so it doesn't get too wide on larger screens. To solve this issue, give the card a max-width of around 20rem.

  • Add padding: .75em 2em; on the card links.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  01

  Marked as helpful