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 card

P

@Arnotts33

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 am quite happy with the fluidity of my workflow for this one.

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

I had to choose between an or simple tags for the links. I found it a bit challenging to style the list so I went with the tags.

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

I am still working on responsiveness and semantic html. I find it to be much better for code readibility.

Next thing I am going to work on as well is trying to group my css code into different files: one for fonts, one for root...

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! Good work, congrats with new challenge =)

Don't abandon lists though =) They are important semantic elements, and the next challenge (the recipe page one) contains plenty of them, so here a few tips about them.

The list tag should contain li tags. The content of the list placed inside them. With your classes it could looked like this.

<ul class="social-links">
    <li><a href="#" class="social-link">Link here.</a></li>
    <li><a href="#" class="social-link">Link here.</a></li>
    <li><a href="#" class="social-link">Link here.</a></li>
    <li><a href="#" class="social-link">Link here.</a></li>
    <li><a href="#" class="social-link">Link here.</a></li>
</ul>

That looks complicated, but your css rules would be quite similar. The main thing you should do is to remove list markers by adding list-style: none.

.social-links {
	list-style: none;
}

It's a basics. If you don't need to remove markers, but change them you can use marker selector.

.social-links li::marker {
	color: green;
}

Hope you find something useful here =)

Marked as helpful

1

P

@Arnotts33

Posted

Hi @Alex-Archer-I !

Thanks for another useful feedback :)

I will definitely work on it on the next challenge!

1
Alex 3,130

@Alex-Archer-I

Posted

@Arnotts33

You're welcome =)

Maybe, if this go on like that, I could receive some cooking tips in return =)

0
P

@Arnotts33

Posted

@Alex-Archer-I

Deal! ;)

1
IZY_BOY 70

@IZY-BOY

Posted

@Arnotts33 Great work on this challenge, ilike the way you name your sections and organize your code. 😁😁😎

1

P

@Arnotts33

Posted

Hi @IZY-BOY !

Thanks for your feedback!

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