Submitted 3 months ago

Social Links Profile (React and Tailwind CSS)

Justin Levy• 100

@justinsane

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

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 the responsive layout and how I believe it's similar to the original. I did not use the Figma files.

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

I forced myself to practice 'DRY' coding concepts and use re-useable code for the buttons. I did this by utilizing javascript inside my React component.

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

Can I improve this by using React useState hook for the hover function or is CSS hover properties sufficient?

Eg-

a:hover {
  @apply bg-green text-black;
}

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted 3 months ago

Hi!

No, the css hover effect is quite enough for this case. useState would be an overkill and an extra load on the app. But it's good that you're looking for various ways of implementation.

And a couple of semantic suggestions. This is a list of links, so it's better to use ul and li tags here.

<ul>
    <li><a href="#">It's a link here.</a></li>
    ...more links here
</ul>

If you are changing the display property of the ul or ol tags, you also need to add role="list" attribute to it.

Also every page should contain main tag. For example you can use as root for app building.

Hope that could help. Good luck =)

Marked as helpful

Justin Levy• 100

@justinsane

Posted 3 months ago

@Alex-Archer-I Great suggestions. Thanks for making me aware of role="list". I refactored my code. See below.

Alex• 3,130

@Alex-Archer-I

Posted 3 months ago

@justinsane

Yes, that's right =)

I want to warn you though about key values. It should be unique values which will definitely not change. Of course it is important mostly for the components which state could be changed, so it isn't a thing for this project, but it's good to keep that in mind.

In real projects you'll often be work with data from the database, where every object has its own id. And sometimes you can't fully predict which part of the data could change, but it totally won't be an id. So it's a good habit (especially since you are already simulate array of data and you can add everything to it) to use id as key value.

Sorry, if you are already aware about it, it's hard to tell who at what level here.

Marked as helpful

Justin Levy• 100

@justinsane

Posted 3 months ago

@Alex-Archer-I good to know about key values, thanks!

Daniel 🛸• 44,230

@danielmrz-dev

Posted 3 months ago

Hello there!

Congrats on completing the challenge! ✅

Your solution looks great!

📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

Here's and example on how you can refactor your code:

After Refactoring

<ul class="list-container">
    <li><a href="#">Github</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    ...
</ul>

By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

I hope you find this helpful!

Keep up the excellent work!

Marked as helpful

Justin Levy• 100

@justinsane

Posted 3 months ago

@danielmrz-dev Good recommendations. I refactored my code.

function LinkTree() {
  return (
    <ul className='flex flex-col' role='list'>
      {Object.entries(links).map(([name, url]) => (
        <li
          key={name}
          className='text-center w-full h-full text-sm bg-grey rounded-md font-bold m-2 no-underline'
        >
          <a
            href={url}
            target='_blank'
            rel='noopener noreferrer'
            className='block w-full h-full p-3'
          >
            {name}
          </a>
        </li>
      ))}
    </ul>
  );
}

Please log in to post a comment

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