Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Social Links Profile (with Flexbox, transitions and a custom cursor)

nicowashere•250
@devdrivenai
A solution to the Social links profile challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

Even though I know this is a very basic project, I'm pretty happy that it just took me a little while (most of the time I spent it with a couple of things mentioned in the challenges answer below). Doing things quicker feels like progress, especially when little things like variable fonts hosting, transitions, etc. that took me a while in previous projects, now they take me just a few minutes. Have to keep going!

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

On the one hand, I had never worked with hsl() before, so in the beginning I was puzzled when my CSS was not working... I started removing and adding different lines to see where it was breaking and it seemed to be in the declaration of the custom properties (aka variables), and then I spotted I was misusing the syntax of hsl(). So used to things like hexadecimal, where you specify colors like #fff, and the rgb syntax with numbers from 0 to 255 or percentages, I just assumed that hsl() would also use percentages... and it does, only in part. :) The first value (hue) takes a number (not a percentage!) from 0 to 360! Only the second and third value (saturation and lightness) take numbers from 0 to 100 so in this case you can use percentages. That gave me trouble and took me a while. Lesson learned.

Then again, I took it upon myself to add a custom cursor (if you're reading this, I dare you to spot it in the live site, it's not too hard to find), with a customized svg and custom coordinates. I found this challenging and fascinating and definitely learned something. I basically based on MDN docs and my own tests. I definitely liked the result.

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

I'll be honest. I didn't leave anything undone of what I set myself to do. However, if you notice anything that I could improve, or anything that could have passed unnoticed to me, please let me know. TIA!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on nicowashere's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License