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 media card using flex-box

@dev-italoregis

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

Boris 2,870

@mkboris

Posted

Nice work dev-italoregis, here are a few things to review

  • Using the a tag for the social links is sufficient, you don't need to wrap them in button tags. Also, using an unordered list ul to group them is a better approach for both semantics and accessibility.
  • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
2

@dev-italoregis

Posted

@mkboris 

Thanks a lot, Boris. 

  • I just used the button  because I couldn't make it work my div a with cursor: pointer;, don't know why, though. But I preferred using buttons. 
  • Thanks for the tips; every course or video that I saw until today explains me this way.
  • I have a question about your modern reset. I always have "problems" with margin and padding that the browser uses; I couldn't see the reset of padding anywhere. Can you explain to me why?
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