Skip to content
Submitted 5 months ago

Social Links Profile - w. hover animation

SaruMakes•160
@SaruMakes
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 how close to the original design I was able to get, using only images. I'm also quite proud of the little hover animation I created, and how I feel like I'm getting better and quicker at making these things. I'm definitely experiencing far fewer hiccups along the way, which is encouraging.

I created this using Flexbox and I am feeling fairly comfortable with it by now. However, I have yet to really delve into CSS Grid, and I feel like that is definitely something I need to learn more about, as I understand it is used to style and organise layouts as well.

I would also like to get better at using Figma, as I'm not particularly skilled at using it yet, and I'm sure there are better ways to use it, than how I used it for measuring the design elements (based purely on the pictures provided).

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

Initially I'd created the links using s and 's nested inside, but the hover state animation was causing me trouble, as I couldn't get it to change the text color as well. I then troubleshooted the issue and read up on how to work with buttons, where I learned how to style a button better, as well as learning that it's better to not use ``'s at all for external links, as it can be confusing for users of assistive technologies.

I was also struggling with the centering of the component on the live page, but I was able to troubleshoot it with Dev Tools, and found that the lack of vertical centering was due to the main container matching its height to that of the component. Adding height: 100vh; fixed this issue.

Curiously, the links in the attributions footer don't show as clickable in my VS Code preview window, but they work perfectly fine on the live page. I'm not sure why that is, but I haven't looked into it further. I use the Codeswing extension in VS Code, to give me a live preview of my pages as I work on them.

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

As always, I'd love feedback on my HTML code regarding the structuring and semantics. I'm still very much trying to learn the best way(s) to work with semantic HTML.

Also, if there's anything in my CSS code that stands out to you, as something I could improve or something that seems strange to you, I would love to know!

Community feedback

  • Koda👹•3,830
    @kodan96Posted 5 months ago

    hi there! 👋

    A couple of tips I packed up for you:

    HTML:

    • your anchor tags should be placed in an ul and li tags:
    <ul>
  <li><a href="#">Github</a></li>
  ....
</ul>

    this provides your page more semantic meaning

    CSS:

    • use min-height instead of height on the body tag. using height prevents users who open your page on device with smaller screens to scroll down if your content overflows the 100vh

    • don't apply width or height to your elements explicitly, they will adapt to their content's size by default. you can use max-width to create a gap for the width:

    .element {
  width: 90%;
  max-width: 66rem;
}

    in this case .element will take up 90% of the container's width, but won't expand above 66rem (notice that I used relative units in both case instead of pixels)

    Hope this was helpful 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    Thank you so much, Koda, it is very helpful! :D

    I greatly appreciate you taking the time to write out such a thoughtful response. I'll be sure to revisit the project to make your suggested changes.

    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    @kodan96, I have a follow-up question, if you're okay with answering more than you already have. 🙏

    When talking about using relative units, what are your thoughts on when to use hard values like pixels and when to use relative units, especially when to use rem. I feel like I'm hearing so many conflicting opinions on it.

    0
    Koda👹•3,830
    @kodan96Posted 5 months ago

    @SaruMakes

    the easiest answer: don't use pixels at all. I, personally use pixels for the least important things, like border-radius, letter-spacing and stuff like that. So basically in the smallest areas, where it doesn't really matter what you use, because these areas are that small they can't interfere with the layout.

    Marked as helpful
    1
    SaruMakes•160
    @SaruMakesPosted 5 months ago

    @kodan96, that makes sense. I think I'll follow this advice from now on. Thanks again for your help and have a great day!😄

    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