
Design comparison
Solution retrospective
The challenging part for me were the icons
I haven't found the white ones and I wasn't able to add href's to <i> elements from font awesome
Also, mobile design isn't responsive to changes in size so I'll look into how I can fix that
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hello there 👋. Good job on completing the challenge !
-
Social media icons, which are often used to link to a company's social media profiles, should typically be anchor elements because anchor elements allows users to easily click on the icon and be taken directly to the company's social media profile page. This makes it easy for users to connect with the company on social media
Note: The <i> elements should not have an href attribute because they are not links.
Additionally, you should use the
aria-label
attribute to describe the links if they don't have visible text, this will help screen reader users to understand the purpose of the link.
e.g.
<a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
- On mobile devices it looks strange because the body element has too much padding and the svg has a defined width which makes it expand off the screen.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful -
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