Submitted about 1 year ago

Social links css vanilla

bem

Roni Tovar•310

@ronitzdev

A solution to the Social links profile challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Accessibility: Use semantic tags (<main>, <section>, <figure>, <ul>, etc.), add descriptive alt attributes to images, and make sure links are keyboard navigable. Consider using tools such as Lighthouse or WAVE to audit accessibility.

Image optimization: Use images in modern formats (such as WebP if possible), resize images so they are no larger than necessary, and compress them before uploading.

Visual consistency: Use a CSS reset or normalizer (such as normalize.css) and test the site in different browsers (Chrome, Firefox, Edge, Safari).

What specific areas of your project would you like help with?

I would like to learn how to use static source resources, I don't know how to implement them. Improve this part and take the design to something closer. ...

Code

Please log in to post a comment

Community feedback

Youssef•250
@DORMODO
Posted about 1 year ago
Hi Roni, Great job on completing the challenge! 🎉 Your attention to detail.

A couple of suggestions for improvement:

1.Use Semantic Elements: Consider replacing the div with nav for the social links section. This could enhance the accessibility and structure of your code. 👍
```
<nav class="social-links">
    <ul class="menu-links">
      <li class="link__social"><a class="link" href="#">GitHub</a></li>
         ...
      <li class="link__social"><a class="link" href="#">Instagram</a></li>
    </ul>
</nav>
```
2.Use figcaption for Descriptive Text: Moving the h1, location, and description into a figcaption within the figure tag can improve semantic meaning and accessibility. 💡
```
<figure class="presentation__figure">
      <img src="">
      <figcaption class="presentation__caption">
               ... 
      </figcaption>
</figure>
```
You’re doing an incredible job, and each project you complete is a step forward. 🚀 Keep pushing your limits and experimenting with new techniques.

Keep up the fantastic work! 👏

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