Skip to content
Submitted 8 months ago

Social links profile

Mthoā€¢160
@MthoNtanzi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of the fact that I managed to complete this task and make it responsive, because it has been a long time since I have done any responsive work.

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

It's been some time since I did frontend work, so doing this challenge was a bit challenging because, for the past months, I've been doing backend work.

Community feedback

  • Daniel šŸ›øā€¢44,310
    @danielmrz-devPosted 8 months ago

    Hello @MthoNtanzi!

    Your solution looks great!

    šŸ“Œ Instead of using <div> as a container and <a> as list items, it's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

    Here's how you can refactor your code:

    <!-- Before Refactoring -->
<div class="list-container">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
</div>

<!-- After Refactoring -->
<ul class="list-container">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

    By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

    I hope you find this helpful!

    Keep up the excellent work!

    1
    Mthoā€¢160
    @MthoNtanziPosted 8 months ago

    Thank you @danielmrz-dev for that input. I have made changes to the code and applied them.

    1

Please log in to post a comment

Log in with GitHub

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