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

Kitalphar 150

@Kitalphar

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 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

@willsf2021

Posted

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 150

@Kitalphar

Posted

@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

@willsf2021

Posted

@Kitalphar Yeah! You did it perfectly! Congratulations!

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