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

Lukito22โ€ข 20

@Lukito22

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

P
Koda๐Ÿ‘นโ€ข 3,810

@kodan96

Posted

hi there! ๐Ÿ‘‹๐Ÿป

A couple of tips:

HTML:

  • all content within the body should be wrapped in landmarks. these landmarks are the header, main and footer HTML tags. for a project like this you at least a <main> tag.

  • semantically its more meaningful if you wrap your social links (which are not even anchor tags at the moment) in a ul and separate li tags:

<ul>
  <li><a href="#">Github</a></li>
   ....
   ....
</ul>
  • <div>-s shouldn't contain plain text, try to use semantically correct text-based HTML tags for your text

  • all HTML document should contain an h1 tag

  • if you close the entire thing into a container you can move them all together, now you just positioned sections one by one, which is why your layout is all over the place as you resize your browser window.

CSS:

  • dont't specify width or height to your containers explicitly, especially not using pixels. again, if you wrap your content into container divs, it will adapt to the content's size automatically

Hope this was helpful ๐Ÿ™

Good luck and happy coding! ๐Ÿ™Œ

Marked as helpful

2

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