Responsive social link card using psuedo hover and focus classes
Design comparison
Solution retrospective
I am proud of being able to create the social links with hover and focus states.
What challenges did you encounter, and how did you overcome them?I had a challenge figuring out what elements I should use for the social links. I also had trouble figuring out how to create the social link component with hover and focus states work as expected.
What specific areas of your project would you like help with?I'd like help in getting feedback on the choices of the elements for each part.
Community feedback
- @KapteynUniversePosted 3 days ago
Hey Tarek, nice job.
Anchor tags are the correct ones like you used, but you don't have to wrap every <a> with a div, also since you styled the divs, links are only clickable over the text. You can use a list instead of divs. Nice of using aria-labels but you don't need to use role=link on the anchor tag, by default, it has that role already.
<ul> <li><a href="#">GitHub</a></li> <li><a href="#">Frontend Mentor</a></li> <li><a href="#">Linkedin</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul>For main classed div, use main landmark
On a real page that h1 won't be a h1, just for good practice you can think about it for the future challenges. Image alt text might be better. I don't know what a screen reader user prefer but i went with "Jessica Randall's profile picture". Right now yours probably being seen like image, avatar, hypen, jessica by a screen reader.
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