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 Links Profile w/HTML&CSS

Mishael 50

@mishaelcodes

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

fr4nbtt 50

@fr4nbtt

Posted

Hello, just my two cents here:

1.Replace <div> with <article>: It might be beneficial to use an <article> element for the profile card. This indicates that the content is self-contained and related to a single topic, which can improve accessibility and SEO.

<article class="profile-card">
    Profile content here
</article>

2. Place the Links Within the Card: You could consider positioning the social links inside the profile card. This would create a more cohesive unit, making it visually appealing and easier to navigate.

<article class="profile-card">
  -- Profile content here --
  <ul class="social-links-list">
    -- social links --
  </ul>
</article>

3. Add aria-labels to Links: Consider adding aria-labels to your links to enhance accessibility. This can help users with screen readers understand the purpose of each link.

Keep up the great work, and good luck on your journey.

0

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