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-main

@Surjo-Sen-BD

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

Hi Surjo-Sen-BD nice work, just a few bits to make it better, the social links appears to be overlapping the card, that's because of the height you set on the card, remove the height from the card so the links don't overlap

Some suggestions to consider moving forward

  • Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
  • Also, the buttons are supposed to be anchor a tags a styled liked buttons. Buttons are for events like toggling content or submitting a form and anchors are for navigation. In this case clicking on the link will navigate you to a new page, so you should should use the anchor element and style it like a button.
  • 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.
  • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
  • Media queries should be defined in rem not px.
  • All content should be wrapped within landmarks. Wrap a main tag around your card.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

Hope this helps

Marked as helpful

0

@Surjo-Sen-BD

Posted

@mkboris Thanks sir, I will do better next time.

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