Social links profile using Flexbox

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hello again, Incredible work on this! You’re making great strides, and I have a couple of suggestions that might push it even further…

  • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

          <a href="https://github.com/rkeppler42"><button>Github</button></a>
          <a href=""><button>Frontend Mentor</button></a>
          <a href=""><button>Linkedin</button></a>
          <a href=""><button>Twitter</button></a>
          <a href=""><button class="last-button">Reddit</button></a>
  

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Was expecting to see some BEM based of previous feedback but dont see any here.

  You’re doing so well, and I hope this feedback is helpful! Keep honing your skills and remember to enjoy the process—you’re on a great path. Stay motivated, and happy coding! 🎯

  Marked as helpful

  1