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 Using HTML & CSS

Vinny_Aā€¢ 50

@Eye0001

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I am most proud of being able to use Flexbox to organize the profile, I was able to recall what I needed to do by remembering other challenges.

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

A small challenge I encountered was aligning the links correctly, I eventually figured this out by trial and error using Flexbox.

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

Please tell me what I could do to improve my code. Anything helps :)

Community feedback

Darkstarā€¢ 1,000

@DarkstarXDD

Posted

  • You can't use a button inside the <a>. They are two different elements used for two different purposes. <button> is for toggling content like an accordion or submitting a form. <a> is for navigation. Chose the one that matches your need. In this case it's an <a>. Because clicking on those links will navigate to another webpage. You can style the <a> to look like a button.
  • Try to write better alt text. read

Marked as helpful

1

Vinny_Aā€¢ 50

@Eye0001

Posted

Thank you, I fixed it.

0
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hey there!

Congrats on finishing the challenge! āœ…

Your solution looks awesome!

šŸ“Œ It's a good idea to use semantic HTML elements like <ul> and <li> for lists. This makes your code more accessible, maintainable, and meaningful.

Here's an example of 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>

Using <ul> and <li> makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.

Hope this helps!

Keep up the great work!

Marked as helpful

1

Vinny_Aā€¢ 50

@Eye0001

Posted

Thanks for the feedback, I will keep this in mind.

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