Skip to content
Submitted 4 months ago

Responsive social links profile with Flexbox

Ashap Bappy•50
@ashap-bappy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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

  • Krushna Sinnarkar•1,100
    @krushnasinnarkarPosted 4 months ago

    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•50
    @ashap-bappyPosted 4 months ago

    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

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