Skip to content
Submitted 5 months ago

Social links profile card

Arnaud Lahaut•200
@Arnotts33
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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-IPosted 5 months ago

    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
    Arnaud Lahaut•200
    @Arnotts33Posted 5 months ago

    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-IPosted 5 months ago

    @Arnotts33

    You're welcome =)

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

    0
    Arnaud Lahaut•200
    @Arnotts33Posted 5 months ago

    @Alex-Archer-I

    Deal! ;)

    1
  • IZY_BOY•70
    @IZY-BOYPosted 5 months ago

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

    1
    Arnaud Lahaut•200
    @Arnotts33Posted 5 months ago

    Hi @IZY-BOY !

    Thanks for your feedback!

    0

Please log in to post a comment

Log in with GitHub

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