Responsive Social Links Profile Using CSS Flexbox

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

I am most proud of how I integrated accessibility features into the design, particularly through the use of ARIA attributes (which I have not used in my previous designs) which make the website more navigable for users with disabilities. I also think my CSS is structured well and would be easy to update to a different theme.

Next time, I would like to explore more advanced CSS techniques or perhaps incorporate a CSS framework like Tailwind CSS to streamline the development process further. I could also add my own information to this in the future.

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

Applying the CSS for the hover, focus and active states of the social links

Initially, I was having issues getting the color of the text in the <a> tags to change when I hovered over the <li> elements. I could get the background to change but the text (which was wrapped in an <a> tag inside the <li>) was only changing color if I directly hovered over the text, not if I hovered over the <li> outside of the text. To fix this, I adjusted the CSS so that the <a> tag inside the <li> filled the entire space of the <li>. This way, hovering anywhere over the <li> will trigger the hover effect defined for the <a> tag.\

Here are the specific adjustments that I made to the css:

1. Set the <a> tag to display:block in order to make the <a> tag fill the entire space of its parent <li> element.
2. Moved the padding from the <li> to the <a> tag. Since the <a> tag is now a block element, it can handle padding, margins, and other box-model properties.
3. Applied the :hover, :active, and :focus pseudo-classes directly to the <a> tags. This change guaranteed that both the background and text color changes would be visible when any part of the <li> was hovered over, not just the text.

Here is the relevant html and CSS code:

<li class="social-link-item m-t-200">
  <a
    class="social-link-item-text text-preset-2 bold"
    href="https://github.com/cocoelizabeth"
    target="_blank"
    aria-label="Visit my GitHub profile"
  >GitHub</a
  >
</li>

.social-link-item {
  width: 100%;
  list-style: none;
}

.social-link-item a {
  text-decoration: none;
  display: block;
  background-color: var(--color-grey-700);
  text-align: center;
  border-radius: 8px;
  padding: var(--spacing-150);
  transition: background-color 600ms ease-in, color 600ms ease-in;
}

.social-link-item a:hover,
.social-link-item a:active,
.social-link-item a:focus {
  background-color: var(--color-green);
  color: var(--color-grey-700);
  cursor: pointer;
  outline: none;
}

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

1) INSTAGRAM LINK ISSUE
I had a really annoying issue with the Instagram link that I would help with. For some reason, when I used the link href="https://www.instagram.com/coco.elizabeth_/", the browser added inline styling (color and text-decoration) to the <a> tag for the instagram social link item. I couldn't find anything online about why this was happening but it happened to me in both Chrome and Safari, and it happen on my local server as well as when I published the project on GitHub Pages.

Here is a screenshot of what was happening:
(Notice the purple, underlined instagram link)

This is the HTML I was getting when I inspected the code:
(Notice the added style attribute, which was not added to any of the other links)

<li class="social-link-item m-t-200">
   <a 
     class="social-link-item-text text-preset-2 bold" 
     href="https://www.instagram.com/coco.elizabeth_/" 
     target="_blank" 
     aria-label="Follow me on Instagram" 
     style="color: rgb(206, 167, 212); text-decoration: underline;">Instagram</a>
</li>

Things I tried to fix it:

1. Setting a :visited CSS pseudo-class in the CSS - This did not work.
2. Tested it in different browsers (Chrome and Safari). - It was happening in both browsers
3. Pushing the site live to GitHub pages to see if maybe it was just an issue with my local server - This didn't fix the issue

Ultimate solution/workaround:
To fix the issue, I used a URL shortener and replaced the link with the shortened URL: href="https://tinyurl.com/coco-elizabeth-intsa".

While this workaround fixed the issue, I am still confused about why it was happening. If anyone has any ideas of what would have caused this, please let me know!

2) FIGMA ANIMATION/TRANSITION I found it difficult to get my hover effect to fade in and out exactly like the Figma prototype and I still don't think it's perfect. Does anyone have a good resource for CSS transitions/animations or how to export the animation properties from Figma to CSS without a developer plan? Is this even something you could do with a developer plan?

Apart from these two things, any feedback of how I can improve is always welcome :)