Skip to content
Submitted over 1 year ago

Social media links with CSS Grid and a little of animation.

animation
LuBrito•60
@Luizadebrito
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm pround to be capable to do that by myself. I don't think I'm in position to say how I could do differentry, but certainly in the future, when I get more knowledge I'll be able to think In many different ways to do this project.

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

The challenge I encounter was about the button with the tag . I wanted this to act like a button, but doesn't work at the begginer. So I did some searches about how the links and buttons work and when I did I found out that I just had to involve the tag and on the tag nav.

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

Well, I just need some feedbacks about how I could do better or if it's good that way.

I appreciate any suggestions and feedbacks!

Code

Please log in to post a comment

Log in

Community feedback

  • LuBrito•60
    @Luizadebrito

    Thank you so much for your recommendations! I'll do the changes. I strugle a little bit with semantic HTML so your help is so much!!

    And I do apologize for my mistakes in English, cause I'm learning.

    It helped a lot. I appreciate that you used your time to help me.

  • Brian Michael Poblete•490
    @Brian-Pob

    Hi Luiza! Great job on your solution! I think the animations that you added to the links are a nice touch.

    I do have some recommendations:

    • I see that you have button tags placed inside your a tags. This is not ideal because button tags and a tags have different purposes. Having a button inside an a tag can cause unintended behavior when using screen reader tools and keyboard navigation.
    • With CSS, it is possible to style any element in any way you like. Just because an element needs to look like a button does not mean it has to use the <button> tag.
    • For the links, I noticed that you positioned them by placing a margin on the buttons. A better solution might be to give the surrounding nav element the CSS property display: flex; with flex-direction: column; and including a gap. That way, you don't need to set a margin on every element. So your CSS could look something like this:
    nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

    Hope this helps!

    If you feel stuck, feel free to use my solution as a reference.

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