
Social Links Profile (with Flexbox, transitions and a custom cursor)
Design comparison
Solution retrospective
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!
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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