Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social link profile

Skwarek 30

@Skwarekk

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@MohammedOnGit

Posted

Hello Skwarek!!!

Your HTML structure for the social links profile looks well-organized. Here are a few suggestions for improvements:

  • Best Practices Alt Text for Image: Always include a descriptive alt text for the profile image to enhance accessibility and SEO.
<img src="assets/images/avatar-jessica.jpeg" alt="Profile picture of Jessica Randall" />
  • Semantic HTML:

Consider using more semantic HTML elements like <nav> for the social media buttons since they represent navigation.

Example:

<nav class="buttons">
  <button>GitHub</button>
  <button>Frontend Mentor</button>
  <button>LinkedIn</button>
  <button>Twitter</button>
  <button>Instagram</button>
</nav>

Buttons vs Links: Since these buttons are meant to link to external profiles, using anchor tags <a> with the appropriate href attributes would be more semantically correct.

Example:

<div class="buttons">
  <a href="#">GitHub</a>
  <a href="#">Frontend Mentor</a>
  <a href="#">LinkedIn</a>
  <a href="#">Twitter</a>
  <a href="#">Instagram</a>
</div>

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord