Social links profile

Community feedback

• 

  Ibrahim Mohammed•640

  @MohammedOnGitPosted 2 months ago

  Hello Chantal Ngwenya!

  Your "Social links profile" layout is simple and effective, but there are a few improvements you can make based on web development best practices:

  1. Semantic HTML You can improve the semantic structure by using appropriate elements like <header> for the profile section and <nav> for the social links:

  <header>
    <img class="picture" src="./assets/images/avatar-jessica.jpeg" alt="Picture of Jessica Randall">
    <p class="name">Jessica Randall</p>
    <p class="place">London, United Kingdom</p>
    <p class="quote">"Front-end developer and avid reader."</p>
  </header>
  
  <nav class="social-links">
    <button type="button">GitHub</button>
    <button type="button">Frontend Mentor</button>
    <button type="button">LinkedIn</button>
    <button type="button">Twitter</button>
    <button type="button">Instagram</button>
  </nav>
  

  2. Accessibility Buttons should use the type="button" attribute instead of type="submit" as there’s no form submission involved. Add more descriptive alt text to the image for better accessibility:

  <img class="picture" src="./assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall">
  

  3. Use Anchors for Social Links Since these are links to social media profiles, use <a> elements instead of <button> to follow web conventions and improve accessibility.

  <nav class="social-links">
    <a href="https://github.com" target="_blank">GitHub</a>
    <a href="https://frontendmentor.io" target="_blank">Frontend Mentor</a>
    <a href="https://linkedin.com" target="_blank">LinkedIn</a>
    <a href="https://twitter.com" target="_blank">Twitter</a>
    <a href="https://instagram.com" target="_blank">Instagram</a>
  </nav>
  

  4. Add ARIA Roles For better accessibility, you can add ARIA roles to define the navigation and button structure:

  <nav role="navigation" aria-label="Social media links">
    <a href="https://github.com" target="_blank">GitHub</a>
    ...
  </nav>
  

  These updates will make your profile page more accessible, semantic, and user-friendly. You did great. Keep it up!

  Marked as helpful

  1

  ---

  

  Chantal Ngwenya•60

  @ChantalNgwenyaPosted 2 months ago

  Hey @Aggressive-Mohammed

  Thank you for an informative feedback. I will also improve my code and also keep in mind about the web development practices.

  1
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • 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.

      <div class="buttons">
          <button type="submit">GitHub</button>
          <button type="submit">Frontend Mentor</button>
          <button type="submit">LinkedIn</button>
          <button type="submit">Twitter</button>
          <button type="submit">Instagram</button>
        </div>
  

  • This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

  • I still see you using px, While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.

  • You should really consider using a full modern CSS reset, It is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  1