Skip to content
Submitted 5 months ago

Social links profile interface - HTML and CSS only

D4WD•90
@devis4wd
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

This time I didn't have the Figma files to look up to, so guessing the distances and font size was not easy. I'm happy that I was able to replicate the layout decently by eye guessing sizes and distances. I'm also quite happy about the number of lines I wrote: Hopefully they're not too many.

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

I struggled a bit because of the lack of Figma files. But building the page without them was useful anyway and not as time consuming as I feared.

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

I'm open to any suggestion ;)

Community feedback

  • Daniel 🛸•44,250
    @danielmrz-devPosted 5 months ago

    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!

    Marked as helpful
    0
    D4WD•90
    @devis4wdPosted 5 months ago

    @danielmrz-dev Thank you very much! I didn0t know I could use <ul> and <li> and style them this way. I don0t know why, but I thought they were limited to to bullet-point lists. Even more important, I wasn't aware of their importance on the accessibility side. Great advice indeed!

    0
  • Raphael Siqueira•150
    @raphaelsiqueiiraPosted 5 months ago

    Parabéns pela sua solução! Ficou muito boa e fiel ao design original.

    Uma dica, use um transition para o hover para deixar a mudança de cor menos brusca.

    Marked as helpful
    0
    D4WD•90
    @devis4wdPosted 5 months ago

    @raphaelsiqueiira You're right, I didn't take the transition effect into consideration this time. Thank you!

    0

Please log in to post a comment

Log in with GitHub

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