Skip to content
Submitted 3 months ago

Social Links Profile

alexrtm•50
@alexrtm
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?

This one was not very challenging. I think got my solution to be reasonably close to the design.

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

Using my custom image, I had to ensure that its aspect ratio was 1:1, otherwise there were weird cropping issues. I'm wondering if there is a better way to make a circular avatar from images that do not have an aspect ratio of 1:1. I was not able to get the padding 100% right. It seemed like the desktop version had more padding than the mobile version. I tried to make it responsive and get the padding right at both sizes, and while I was able to make it responsive, I was not able to get the right padding values at the mobile and desktop sizes.

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

  • Could the social links be organized using an unordered list `` for better semantic structure, considering these are grouped links?

  • Would display: grid have been a better choice for styling the social links card?

  • Is the use of vh units in the padding (clamp(1.5rem, 3.5vh, 2.5rem)) appropriate for providing smooth responsiveness on all screen sizes? Would an alternative unit like vw provide better consistency?

  • Are the focus states (outline: 3px solid var(--clr-text-secondary)) on links clear and distinguishable enough for keyboard users?

  • Should the focus state be visually different from the hover state to better distinguish between mouse and keyboard interactions?

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Nice project! Here are a few suggestions for improvement:

    1. No, adding more elements will only make it harder for screen readers. With aria-labels for the links, screen readers will get the content without any problem. Using <ul> and <ol> will just require more CSS and isn’t necessary since it’s not really a list. aria-label="How to reach me" or something similar would be an improvement.(On the parent div)

    2. Flexbox is the most suitable method to style the card, although you could use Grid for styling the links, but it would involve extra work. Flexbox is ideal for flexible designs, while Grid is better when the parent controls the size of all children, making them the same size or consistently sized.

    3. I’m actually unsure about this one, so I’ll skip it. Arguably, I don't see a reason to clamp this card.

    4. The page isn't tabbable or using arrows, so something might be wrong if that was the intention. I would argue that the focus is too thick; 1 or 2 would be sufficient.

    5. Yes, in most cases, that’s a good idea but isn’t really needed here. It makes the most difference in forms.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
  • Boris•2,850
    @mkborisPosted 3 months ago

    Nice work @alexrtm to answer your questions

    1. Yes, using an unordered list ul to group the social media links is a better approach for both semantics and accessibility.
    2. Using Flexbox would be a better choice styling the card
    3. vw is more reliable in this case
    4. Yes, the focus states is clear and distinguishable
    5. Yes, the focus state should be visually different from the hover state to better distinguish between mouse and keyboard interactions.
    • The height: 100% declaration on the html and body elements is causing the card to stick to both the top and bottom of the screen; replace it by setting min-height: 100vh on the body.
    Marked as helpful
    1
  • Dark•30
    @popcorn150Posted 3 months ago

    Well if you're having issues with styling the social link cards, button to be specific [display: grid] is the best suggestion to follow. Then after that [justify-content: center] and you good to go for the buttons. Worked perfectly for me :)

    1

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