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
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile – Frontend Mentor Challenge

@AlexanderTejedor

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 feel proud of being able to solve a challenge with the tools provided, for example, just the images, since I don't have the Pro version. However, that wasn't an impediment to presenting something decent and very similar to the original.

It's always good to get feedback from other users. I'm not an expert and I'm still learning. I know I can make many aspects of my code more optimal and much better!

Community feedback

Darkstar 1,000

@DarkstarXDD

Posted

  • You are using a <button> inside an <a>. That is not correct. They both have their own use cases. You have to pick the one that suites your use case. A button is used for toggling content (eg: an accordion) or submitting a form. Anchors (links) a used for navigation. Here's a good article for reference: when-to-use-a-button-or-link
  • In this case it's an anchor styled like a button.
  • The location is not a heading. It's a <p>.
  • For the blockquote text you can use the <blockquote> element.

Marked as helpful

0

@AlexanderTejedor

Posted

@DarkstarXDD Thanks for you feedback !! Already make the changes ☺️

0
Darkstar 1,000

@DarkstarXDD

Posted

It's still not correct. Read again what I have said above.

  • The clickable items in this design are <a>. When you click on "GitHub" it will take you to github.com. That's a navigation. Navigations are done using <a>.
  • Also those set of links are a list. button-content should be an unordered list (<ul>). Github, Linkedin etc. should each be a list item (<li>) inside that <ul>. Inside each <li> there should be an <a>.
<ul class="button-content">
  <li><a>GitHub</a></li>
<ul>
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