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 component completed with HTML and vanilla CSS

Carlos Alโ€ข 160

@crsaele

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 plan to transition to using relative units, such as percentages, ems, or rems, in lieu of pixels, to enhance the flexibility and responsiveness of my designs.

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

Thanks to my existing knowledge of center-aligning elements and familiarity with the relevant CSS properties, I was able to complete the task without struggling.

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

Any feedback is super welcome ๐Ÿ˜Š

Community feedback

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

@kodan96

Posted

hi there! ๐Ÿ‘‹

  • since the whole idea behind this is to share social links with people I guess you should include <a> tags within the list items to actually lead the users somewhere:
<ul>
    <li><a href="">Github</a></li>
    ...
</ul>
  • you should use min-height instead of height on the <main> tag, height prevents users on smaller screens to scroll down on the page if the content overflows the 100vh

  • since you applied height: 100vh and made it a flex container it's not necessary to apply height on the body as well

  • try using relative units instead of pixels, it makes it easier to build responsive designs and gives the chance to users with bad eyesight to increase the font size of the page

  • don't apply height or width to your elements, it kills responsivity, let the child elements determine these. If you wanna create a "gap", so a max or min value to the width of your elements use max-width or min-width

Hope this was helpful ๐Ÿ™

Good luck and happy coding! ๐Ÿ™Œ

Marked as helpful

1

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