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

Social Links Profile

@Omarhdez-218

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?

I'm proud of how fast i completed this project, it was easier than i expected.

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

In the screenshot with the active state, the pointer is colored black when it's hovered over one of the links.

I tried using 'caret-color: black;' in the '.social:hover' class in my css file but it won't work & when i look it up, i come across the same answer to use 'caret-color'.

Community feedback

P

@coding-vasu

Posted

Thank you for submitting your work on the challenge. After careful review, I have some feedback to help improve your solution:

  1. HTML Structure: The schematic HTML structure needs attention. Consider implementing a more semantic approach to enhance the document's outline and accessibility.

  2. Accessibility: Interface is not keyboard-friendly, there's room for improvement in overall accessibility. Consider implementing ARIA attributes and ensuring proper focus management.

  3. Responsiveness: The current implementation shows a horizontal scrollbar on smaller screens. Please review your media queries and layout techniques to ensure a fully responsive design across all device sizes.

  4. Code Organization: The codebase would benefit from improved structure and organization. Consider breaking down your code into logical components or modules for better maintainability.

  5. Layout Considerations:

    • Desktop: There appears to be unnecessary padding in some areas. Review and adjust as needed for a cleaner layout.
    • Mobile: The current mobile layout could use refinement to enhance the user experience on smaller devices.

I recommend thoroughly reviewing the requirement document to ensure all aspects of the challenge are addressed. Take some time to research and understand the concepts involved, particularly in responsive design and web accessibility.

While there are several areas for improvement, this feedback is intended to help you grow as a developer. I encourage you to revisit the challenge, incorporating these suggestions, and resubmit your solution. If you have any questions or need clarification on any points, please don't hesitate to ask.

Marked as helpful

1

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