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 Link Profile

@Mazz100

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


A quick refreshing challenge before starting a React project soon

Any feedback is welcome 😃

Community feedback

Stephen 50

@Codestephenn

Posted

Hello Here's my review of your project:

Semantic HTML: Yes, your solution uses semantic HTML elements, which is great for accessibility and SEO.

Accessibility:

  • You've used ARIA attributes and semantic elements, which is excellent.
  • Consider adding alt text to the profile image for screen readers.
  • The color contrast between the background and text could be improved for better readability.

Layout and Responsiveness:

  • The layout looks good on a range of screen sizes, but consider adding more media queries for smaller screens.
  • The card's fixed width might cause issues on smaller screens; consider using a more flexible layout approach.

Code Structure and Readability:

  • Your CSS is well-structured and easy to read.
  • Consider grouping related styles together (e.g., all .social-links styles) for better organization.
  • Use consistent naming conventions for classes and IDs.

Design Comparison:

  • Your solution closely matches the design, but some minor adjustments could be made to perfect the layout and spacing.

Overall, great job on this project! With some minor improvements, it can be even more accessible, responsive, and maintainable. Keep up the good work!

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