Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I have built my own personal social links card and use custom primary color
What challenges did you encounter, and how did you overcome them?Not much, it actually really fun to experiment using custom primary color other than style guide file provide
What specific areas of your project would you like help with?Any feedback about the code will be really appreciated!
Community feedback
- @0xabdulkhaliqPosted 6 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
WRONG ALT 📸:
- The alt text "
Jessica Randall Avatar
" is somewhat vague and not matches your actual solution. The whole page consists of yours information not Jessica's.
- A more appropriate alt text would be, such as "Nico's profile picture for social media" or "Avatar representing Nico for social link." This would provide clearer information to users who rely on screen readers or encounter image loading issues.
- The
alt
attribute should explain the purpose of theimage
, in our case the image is a portrait of yourself. So alt with your name itself is enough.
- E.g.
alt="Nico' Arifin"
<img src="assets/images/avatar-me.jpg" alt="Nico Arifin">
- Additionally, the color contrast for hover states is not at a good ratio. You need to use a much lighter variant of pink color. You can try this color "
#ff5fa9
". Having the right colors with good contrast ratio will helps you to improve UI, UX and Accessibility also!
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1@N1CoderPosted 6 months ago@0xabdulkhalid I forgot to change the alt text 🤣 Thanks for feedback about the color, that is really helpful!
0
Please log in to post a comment
Log in with GitHubJoin 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