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

@karthikganesanTR

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?

Able to complete without figma files.

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

without figma files, i have faced a challenge to design with assumptions

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

suggestions to Improve css

Community feedback

T
Grace 29,310

@grace-snow

Posted

This needs some html changes. Make sure you refactor it before moving on to anything else.

  • the attribution should be in a footer outside of main.
  • the image alt should be more descriptive.
  • never have text in divs or spans alone. They are meaningless layout elements. The sentence needs to be in a paragraph.
  • this is a list of links, so you must use list markup.
  • each link must be an anchor. Divs are non functional. Try and use this with a keyboard and you'll see the whole page does nothing even though those items are meant to be clickable. Remember that anything with hover styles in a design means it's meant to be interactive, which means there needs to be an interactive element (like a link or button etc)

Marked as helpful

0
Taiwo 130

@taiwogbadamosi

Posted

For semantic HTML, the divs should probably be named buttons. Otherwise awesome work!

0

T
Grace 29,310

@grace-snow

Posted

@taiwogbadamosi sorry, that's close but not quite correct. These would trigger navigation so would be links (anchors) not buttons. I hope that makes sense.

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