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

Responsive social links profile with Flexbox

@ashap-bappy

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 most proud of me trying to make the whole link clickable with padding. The way designed it, I was only be able to click on the space that tag is occupying, then I researched a bit and gave the padding in the tag instead of tag. Next time I would try to understand these things before doing the design.

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

The challenge that I encounter was making the design as close as possible but in this challenge there was no figma file given, which makes it more difficult to set the values of various elements. I overcome those with lots of trial and error.

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

I would like help with to decide to what HTML elements to use for certain cases. I used tag and but it can be done with tag also. How to decide which will be more effective?

Community feedback

@krushnasinnarkar

Posted

Hi @ashap-bappy,

Congratulations on successfully completing the challenge! Your code is well-structured, and the website works beautifully across different screens. You've done an excellent job ensuring responsiveness and functionality.

Your HTML structure is quite good, but it can be enhanced by using more semantic tags and ensuring proper accessibility. Here are some improvements:

  • Use <header> for the profile header.
  • Use <section> for grouping related content (profile header and description).
  • Use <nav> for the links, as they are navigational elements.

You can check W3Schools Semantic Elements to learn more about semantic elements and improve your HTML structure.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

Marked as helpful

1

@ashap-bappy

Posted

Thnaks, @krushnasinnarkar for your value able feedback. I will learn more about semantic elements and will use it in further projects.

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