Social Links Profile Challenge

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

I am proud that I finished this project and built upon the work I've done in previous projects. This project involved more than the previous ones I've done, especially regarding the navigability of the links, including the animation for the links, etc. I also implemented responsive design through the use of media queries, which was one of the things I set out to incorporate into this project.

In the future, I would like to try the reverse workflow from the one I have been incorporating to this point. Thus far, I have focused on the desktop layouts first, and later included the mobile designs. In the future I would like to attempt to take a mobile-first approach.

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

The main issues I ran into revolved around making the links navigable by the tab key while still evoking the animation effects. Because I have my anchor tags nested in list elements, I was having trouble getting the animation to activate. I also ran into the issue that the links were difficult trigger on mobile devices because the width of the link element was only as wide as the text it contained: it did not span across the visual container it was in. I overcame these issues by using Chrome DevTools to get a closer look at what was going on behind the scenes. Eventually I used the :has() pseudo-class to solve the issue of the animations not triggering when navigating the links via keyboard, and I simply had to give my anchor tags a display of block to adjust their width inside their container. These solutions resulted in the links being navigable by the tab key as well as easy to activate on mobile devices.

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

For this project I intended to only use HTML and CSS. While I was able to make the links navigable via the tab key, I could not figure out how to make them navigable via the arrow keys without incorporating JS. I would like to know if there is a way to make this happen only using HTML/CSS or if JS is required to incorporate this feature.