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-main

@Aboelsayed78

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

P

@Johann-Alpha

Posted

Hi Mohamed, I hope you're doing well. Here, I will leave some suggestions in the hope you find them helpful.

  • Using semantic HTML. In your links, instead of using a div class="links" you could have used a <nav></nav> tag, which would make your code more accessible to people with disabilities. You could have also added a <main></main> tag or a <section></section> tag so that your page gets better SEO.
  • Describing images with the alt property. In your images, you can always write a descriptive text in your alt property, so that visually impaired people can hear the descriptions provided by their reader devices.
  • Tailoring your design to different screen sizes. Although what you did was very accurate for the desktop size, the design had subtle changes for different sizes. For example, the width of the inner container changes depending on if it's desktop, tablet, or mobile.
  • External CSS. You could have used a different file for the styles. That way you can further separate the structure of the page from the appearance. I hope you continue doing great work!
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