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

Responsive social link profile card with html & CSS

@riishi101

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

SaruMakes 160

@SaruMakes

Posted

Hi @riishi101! A very late congratulations on completing this project. I can see that you've moved far past this stage, so I don't imagine you're looking for much feedback on this submission. As such, I'll leave you with one main comment:

The main thing which stands out to me, is your use of <button> for the external links. In my research on the topic, I've learnt that it is best to use <a> elements for any actual links, as it works much better for users of screen readers.

The reason is that the way that screen readers work with <button> and <a> is very specific, and it can be confusing to the user if the elements don't act/work the way that they would expect them to. You can still style your links to look like buttons, the screen reader won't care about that, but it is better to have links be actual links, and leave <button>s for actual buttons, that trigger actions on the page itself.

You can read more about it here: https://theadminbar.com/accessibility-weekly/buttons-vs-links/

I hope this information is useful to you. Have a great day! :)

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