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 Link Profile made with HTML/CSS

Dylan 290

@dquinn089

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 was more focused on have readable code this time around, making use of the different elements HTML has to offer to create landmarks that offer a much more appealing structure for the reader.

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

I'm still not really sure why, but I was having trouble with the font in the button elements. Even though I correctly integrated the link for the font that was given in the style-guide, and setting it to the font property in the body element; it didn't change the font for the buttons. I just had to explicitly set the button element font property to the same font.

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

Not really sure specifically for this one, but I will take any tips on ways to streamline the process for building these HTML structures more efficiently, as well as design tips for CSS.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

Great work, congrats! It's very neat and close to design =)

I can give you a couple suggestions about semantic. It's a list of links, so it's better to use ul tag here and put a inside li. Like this:

<ul>
    <li><a href="#">It's a link here!</a></li>
    ...and more links here
</ul>

Than you doesn't need a button inside a - it's a tags with very different purposes =) Also it is recommended not to skip headers hierarchy - I mean after the h1 should follow h2 etc.

Oh, and you can get rid of margin: auto for the main (good that you are use main tag, btw) since you already centered it with body tag.

Hope that helps. Keep doing great stuff =)

Marked as helpful

0

Dylan 290

@dquinn089

Posted

@Alex-Archer-I

Thank you dude! Took your advice exactly and it looks way better and more readable!

1
Alex 3,130

@Alex-Archer-I

Posted

@dquinn089

Hey, glad I could help =)

Fell free to ask anything if need =)

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