Social links profile using html and vanilla

Community feedback

• 

  Kira Tantari•180

  @KirativeWD

  Posted about 1 year ago

  Hi there!

  Great job completing this project.

  I noticed you mentioned that you initially had some difficulty getting the hover to work and I wanted to give you a tip from what I saw in your CSS. Currently, the li has the hover state. This can make it confusing for users (if this were an active page) because when the li changes colors, you'd expect to be able to click anywhere for the link to work—but it doesn't work that way. And if a user were to tab to the links, the colors would not change. So what can be updated to improve user experience and make the hover state easier to apply?

  a {
    display: block;
  }
  

  Anchor tags have an initial display value of inline. This makes it so that its width is constricted to its content. When you change the value of display to block, the anchor tags will now behave as any regular block-level element and fill its parent's width and padding can be used to achieve the intended height. However, you will encounter a problem because you're using flex and setting defined heights/widths. This can easily be fixed by adjusting the CSS like so...

  .social-links {
    width: 100%;
  }
  
  /* remove all li styles */
  

  .social-links only needs width: 100% because it's a flex child. But why remove all styles from the li? They're all going to be applied to the anchor tag which is how we'll make applying hover styles much easier! I will show you what selector to use instead.

  li:not(:last-of-type) { // <-- Selects all li except the last in the list
    margin-bottom: 1rem; // <-- So we can get the space between each element
  }
  
  a {
    display: block; // <-- To allow block-level styling applications
    background: #333;
    color: white;
    padding-block: 1rem;
    border-radius: 8px;
    transition: all 200ms ease-in-out; // <-- Just for fancy transitioning
  }
  
  a:is(:hover, :focus-visible) { // <-- Applies styles when hovering and tabbing
    color: black;
    background-color: #c4f82a;
  }
  

  With the prior applications, you now have hoverable links that are clickable within the entire box and change color when hovered and tabbed to.

  00

  Marked as helpful