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

Social Links Profile using BEM

@msakuma-dev

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 think the design is pretty close to the original one, given I didn't get the Figma files at all to compared. I'm happy that using rem for font-sizes and other things are becoming more natural.

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

It was great to get more basic understanding on how some properties of CSS don't cascade at all and practicing the layout.

To size the buttons how I wanted it actually took me a while...

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

Moving forward I must pay more attention to ARIA attributes, since I haven't been using it so far, but it's definitely something everyone is looking for.

Community feedback

@loicduong

Posted

Hi @msakuma-dev. I think your project turned out great! However, I have some feedback that I think might be useful:

  • Images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader.
  • You can try setting the font weight of the button and name to 700.
  • The spacing between the name and location should be reduced, perhaps to 4px.

I hope this is helpful. 👍

Marked as helpful

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