Skip to content
Submitted 3 months ago

Social Links Profile with Simple Responsiveness

Aria Rouzegar•150
@Ariarzg
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am pretty proud of this design. Because I used rem instead of px in this design. And also instead of media queries, I used max-width.

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

Nothing really. It was a smooth experience.

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

I can't think of any. But I am open to any recommendations and feedbacks.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,260
    @Islandstone89

    Hi, well done!

    A couple of tips to improve your solution:

    HTML:

    • Instead of using <section> for the card, I would consider the <article> element. You could also use just a <div>.

    • A better alt text for the image would be something like "Headshot of Jessica Randall".

    • "London, United Kingdom" is not a heading but a <p>.

    CSS:

    • Make a habit of including a modern CSS Reset at the top of the stylesheet.

    • Move font-family and color to body. Except for padding, margin and box-sizing, we rarely set styles on the universal selector *.

    • I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

    • Descendant selectors like .social-links-list li and .social-links-list li aincrease specificity, making the styles harder to override. Instead, give elements a class and use that as the selector.

    • max-width on the card should be in rem. Around 20rem works well.

    Marked as helpful
  • Sylvain GENEAU de LAMARLIERE•80
    @Mirouf18

    Good job !

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