Skip to content
Submitted 4 months ago

Social Links Profile

Darkstar•1,100
@DarkstarXDD
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?

Built with. 🔨

  • HTML.
  • Tailwind.
  • Vite.

New Things Learned. 🎓

  • Using @apply to add utility classes to my custom classes defined inside the styles.css file.

    @layer base {
  *:focus-visible {
    @apply outline-[0.125rem] outline-dotted outline-primary-400 outline-offset-[0.125rem];
  }
}

Ending Notes. 📝

  • After my previous project, which was my first Tailwind project, I wanted to do another small component project using Tailwind to become more familiar with it.
What challenges did you encounter, and how did you overcome them?
  • The padding between the edges of the container and the content were different in mobile screens and desktop screens. I got the result using a clamp(), so I could skip having a media query only for that value. 
    @layer utilities {
  .p-clamped {
    padding: clamp(1.5rem, 5vw, 2.5rem);
  }
}
What specific areas of your project would you like help with?

Would love some overall feedback on any areas where I can improve.

Community feedback

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

    Hi @DarkstarXDD,

    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!

    0
    Darkstar•1,100
    @DarkstarXDDPosted 4 months ago

    @krushnasinnarkar

    Thanks, but I don't think any of the mentioned points are valid for this component.

    • <header> should be used for content that is repeating across multiple pages. This is a component, which doesn't need a <header>. banner landmark
    • <section> is a meaningless element just like a <div> unless you have labeled it. So no need to replace a <div> with a <section> unless you prefer it.
    • <nav> is used to navigate the content inside the site. Not for external links. Having the links as list items is enough in this case. navigation landmark
    1

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