Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive social links profile

@AllisonFavour

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Same as always, i am proud and happy of not stopping halfway, i got it completed within few hours.

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

The only challenge i encountered was when i had to decide to either use a button tag and then nesting an anchor tag inside the button for the links or using an anchor tag directly and styling it to look like the button.

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

The part where they said we should ensure users can navigate the links using a keyboard, i need some clarity on that and how to go about it, although when i am chanced proper google search and a conversation with claude or chatgpt will give some insight which i will intime.

Community feedback

@marliedev

Posted

Nice Job Allison. Code structure (HTML and CSS) is readable and looks clear and good. Maybe i wouldn't use a h2 for the location info.

Regarding your question to the keyboard optimisation: You used anchor tags which is the best options. They don't need a aria-role or tabindex attribute. Navigation and highlighting (:focus, :focus-visible) works fine with these. You should have added a target:"_blank" attribute to the anchor-links. This is just a usability optimization.

What you could have added is a screenreader optimisation in form of a "screenreader-only"-info that tells blind people a bit more about what will happen when they use the links.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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