Social links profile using CSS Custom Properties, Flexbox

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 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 and example on how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</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!

Hi!

Good work, congrats with your solution =)

That's cool that you manage to find a way for changing link's color. There are few ways how to make it easier, maybe you'll find them useful.

But at first I suggest you to use the hover effect instead active one. The active only works when user click on the link, and right after the click they'll be redirected to another page and could barely see this styling. While hover works when the user hover cursor on the element.

So, if you want to apply some effect to child element you can use this:

.box:hover a {
    color: black;
}

Or even simpler would be just to style the link itself. You can add padding and border-radius to the a and make it look like a box. Than just add all effects to it directly.

Oh, and one semantic suggestion - there is a list of links, so it's better to use ul with li.

Hope that could help. Good luck with your frontend journey and feel free to ask or comment something if need =)