Skip to content
Submitted about 1 month ago

Social Links Profile Card with Semantic HTML, BEM, and Accessible CSS

accessibility, bem
Jennifer Phan•50
@jenphan
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?

I am most proud of how clean I was able to get the solution to the best of my abilities. In the future, I would work on getting more consistent margin/padding and font-sizes.

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

I had to do research to find out how to make it so the interactive elements could be navigated with keyboard.

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

How can I further improve my CSS and make it less redundant and more accurate to the design given?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Danijel•140
    @danijel374

    🌟 Great Job on the Challenge!

    You did an excellent job — clean work and solid effort overall!

    💡 Feedback on Your Question:

    One tool I highly recommend is the Pixel Perfect Pro Chrome extension.
    It lets you overlay the original design on top of your implementation so you can fine-tune spacing, alignment, and layout down to the pixel. Super helpful for catching small visual mismatches and improving CSS accuracy.

    Keep up the great work!

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