Skip to content
Submitted 6 months ago

Social Links Profile Page

Tonny Blair•470
@Tonny-Blair-Daniel
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • Am proud of using the flexbox properly.
What challenges did you encounter, and how did you overcome them?
  • I faced a minor challenge with the links but later had to style them using CSS.
Code

Please log in to post a comment

Log in

Community feedback

  • Mohamed Ahmed•700
    @MohamedSharqawi

    Hello there, your design looks good

    I have some improvements in my mind that might interest you.

    • The avatar image is so big, I don't know if you like it as it is but if you want your solution to be identical to the original design you should decrease the image width, also as the image is bigger than its original one, it is not clear.
    • There is an empty <p> </p>, I really don't know why you use an empty paragraph, there is no need to it, so it is recommended to remove it.
    • Instead of using <span><a>...</a></span>, you can put the links in a list like this below, but why this is better? It is more semantically to use <ul> to group constitutive elements like links in navigation, footer, ..etc. and also by this you will increase the accessibility of your website leading to better user interface.
    <ul>
   <li><a href="#">...</a><li>
</ul>
    • When I hover on the links, the background-image changes but the color of the text doesn't change and still white leading to bad text contrast, if anyone have a some degree of color blindness, he will not see the text, you can change it to black.

    Finally, I hope to find these tips helpful for you, have a nice day😊.

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