Skip to content
Submitted 9 days ago

Social links card using tailwindcss

#tailwind-css
NunoJDMachado•100
@NunoJDMachado
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 proud of learning how to deploy via vercel using a build script in package.json.

Next time I would create custom css classes to better match the design colours.

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

The deployment with a build script was failing multiple times, but I watched some youtube videos explaining how to do it.

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

I'd like to know whether the use of <address> is appropriate for this case and also if I should have an <ul> and wrap the <a>'s with <li> tags the way I did. It was tricky because then the clickable part of the button was only the <a> portion so I had to set the display to block. Not sure if this is a good practice or if I should just keep it simple with a <div> and <a>'s inside.

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,780
    @catherineisonlinePosted 9 days ago

    Hello, there, the solution looks great.

    The address tag isn't very appropriate here it's meant for the type of info that can help us contact the person or organization. This means in this case it could be even socials, not the country. You can read more about it on MDN.

    The ul and li are used as needed, and also are very good for structuring similar lists. And when you have ul, li always needs to be an outer-most tag.

    Finally, it's also fine to make the a tag block so it occupies the entire container, great job!

    What I would change:

    • add to every a tag attribute target="_blank" so it opens up in a new tab.
    • make the quote p tag instead of heading because it's not really a heading
    • make Github profile public so it's easier for people to add feedback to your solutions if you need them. With more complex projects it will be much harder 😬

    Hope this helps, good luck 🔥

    Marked as helpful
    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