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

Responsive social links profile page with html, css only

@Navroz-Singh

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?

It was overall very easy, would try to do it in even more easier way next time.

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

no challenges encountered.

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

help me in writing more readable, maintainable and optimized css.

Community feedback

Darkstar 1,000

@DarkstarXDD

Posted

  • There is no <header> in this challenge. <header> is used for content that is common across multiple pages on a website, such as the brand logo, navbar etc.
  • The width should be max-width on your component. Remove the height. You should not be specifying fixed heights for containers. It will cause overflow issues. The browser will decide the height of the container based on the content inside that container.
  • There is no <footer> in this design. The content you have put inside the <footer> should all go inside the <main>.
  • The name is a heading. Not a <div>. It should be <h1> or a <h2>.
  • The clickable elements are <a> elements. They are also a list of items. So there should be a <ul>, inside the <ul> there should be <li> elements and inside each <li> there should be a <a>.
<ul>
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Frontend Mentor</a></li>
</ul>
  • Give the body a min-height: 100vh. It will make the component centered in the screen. Then remove that 150px margin-top you have. That's not a proper way to center the component.
  • Font-sizes should be in rem. Not in px.

Marked as helpful

1

@Navroz-Singh

Posted

@DarkstarXDD thanks for the feedback. I'll make sure to keep all these points in mind while doing my next project.

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