Skip to content
Submitted 3 months ago

Social links profile

Kitalphar•170
@Kitalphar
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 challenges did you encounter, and how did you overcome them?

I intended to use an unordered list for the clickable links with an a nested inside, but when it came to highlighting and changing text color on the links, i ran into trouble...also selecting the link with Tab only focused the a element which is not what i wanted. Swapping the elements and nesting li inside an a somehow fixed that problem. Edit: Had to fix this, as it turns out this is invalid HTML, using focus-within instead of focus-visible solved the problem.

Community feedback

  • Wilson Junior•210
    @willsf2021Posted 3 months ago

    Hi! Is very similar to template, congratulations! I noticed that you use ":hover" to change the background color of the links, in actually is on ':active" to do this, but your project is still amazing that way!

    1
    Kitalphar•170
    @KitalpharPosted 3 months ago

    @willsf2021

    Thanks for the feedback!

    I read up on the :active pseudo class and it does indeed looks useful, however in this particular case i believe it is not the right one to choose.

    My reason being is that in the challenge brief it states "Your users should be able to: See hover and focus states for all interactive elements on the page" and in the Ideas section it states "Ensure visitors can navigate the links only using their keyboard.", :active pseudo class specifically applies when a user is actively pressing down on a mouse button or when a touch input is engaged. Styling with :active will not show on focused elements as they are in the :focus state.

    So in short i believe the intended goal of this challenge is to learn about :hover; :focus; :focus-visible; :focus-within pseudo classes.

    0
    Wilson Junior•210
    @willsf2021Posted 3 months ago

    @Kitalphar Yeah! You did it perfectly! Congratulations!

    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