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 Media Links

@Supa-Thobile2

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Mouadasel

Posted

  • Semantic HTML: The site uses semantic HTML elements like <header>, <nav>, <main>, and <footer> effectively.

  • Accessibility: Positives: Includes alt attributes for images and good text contrast. Improvements: Ensure all interactive elements have discernible text, use ARIA roles, and verify smooth keyboard navigation.

  • Responsiveness: The layout adapts well across different screen sizes. Enhancements: Test on more devices and adjust text sizes for smaller screens.

  • Code Quality: Well-structured with clear class names and modular CSS. Suggestions: Use CSS preprocessors, apply BEM methodology, and refactor repetitive code.

  • Design Consistency: Aligns well with the design specifications.

Overall, the project demonstrates strong technical and design skills with room for minor improvements in accessibility and code maintainability.

Marked as helpful

1

@Supa-Thobile2

Posted

@Mouadasel Thank you for your feedback!

I will take into consideration all your suggestions and research on some of the concepts. The BEM is one of them, I have heard of the concept but never really went in deep but I think I get the lesson you are trying to teach me. Thanks again for showing me the way!

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