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 Link Profile

@shubhamr10

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 challenges did you encounter, and how did you overcome them?

I did not have the design file for the page, therefore there can be a difference in implementation and actual design. Also, the color for gray 800 and gray 900, were not working for me. So, I did make a change in them a bit.

Community feedback

Tharun Raj 1,250

@Code-Beaker

Posted

Hi there, congratulations on completing this challenge... You've done a great work here! 🎉

I have checked the live site and your source code and I want to share some of my suggestions to improve your site.

  • Consider adding class names to your HTML elements. This will make it easier for you to style the components.
  • You can actually declare the components without wrapping them inside a section tag.
  • The links should be wrapped inside an unordered list ul. Then, each link should be a a list item. Here's an example of this markup
<ul class="links">
<li><a class="links__link" href="#">GitHub</a></li>
<li><a class="links__link" href="#">Twitter</a></li>
...
...
</ul>
  • Make sure your headings are in hierarchical order and they decrease by one level. This is essential in keeping the website accessible.
h1
h2
h3
h4
...
...
  • Instead of px units, use rem or em to define properties such as margins, paddings, font-sizes, etc.

These are small but extremely important in making a website. I hope you understand them. If you want to learn further about them, you can find many articles and tutorials online.

Hope you find these helpful 😄

0
P

@AdamullaOsas

Posted

I had the same problem with sizing my component, but it's fine. One thing though, try to add some spacing between these "boxes" with social media names, this will help reduce this space on the bottom of your component, that just don't look that good.

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