Social links

For this project, I had to create something akin to a Linktree, a card with lots of social links to various places showcasing a professional profile. This was for both desktop and mobile, too.

The task

I was given no Figma file again this time, but I did have design images and a style-guide.md with colors and typefaces etc.

Approach

I was excited by the visual of this project and was eager to setup something that looked like a Linktree. I approached it with a desktop-first approach again since for now, I’m more comfortable that way.

I did what I’ve come into the habit of doing which is listing and planning out HTML elements and their structure on paper before I begin. I feel good at organising information structurally based on a visual design. It comes naturally to me and allows me to start promptly on project.

Outcome

I’m really happy with this outcome. I ran through the task pretty quickly and caught onto how to create certain design features with CSS well like the circular image frame with border-radius. This design is close to the type of thing I’d like to design in future. I had fun with ul stack - It’s a useful tool to have practiced.

🧩 Live Site - https://i000o.github.io/fem-social-links/
✏️ Frontend Mentor Solution - https://www.frontendmentor.io/solutions/social-links-profile-WIpqam6nbY
👾 GitHub Repository - https://github.com/i000o/fem-social-links.git

Lessons

1. I couldn’t figure out how to change the color of the cursor on hover. When I researched, I could only find how to make custom pointers with JS but I haven’t learnt that yet and hoped there’d be an easier way. For now, it’s just a pointer.

2. I used display: flex to center the image in a div.

3. At this point, I begin to prioritise writing clean code. Particularly, removing any lines that aren’t necessary. Not only this, but paying attention to the cascade, too and ordering my CSS logically.

4. Started using Git and GitHub properly via the Command Line! 🤖

5. I integrated focus states for the second time.

Take forward…

❕Using Git and GitHub consistently on projects to get the hang of it…