Submitted 8 months ago

Social Links Profile using CSS Flex

LVL 1

Ankan Das•30

@Ankankun

A solution to the Social links profile challenge

Preview Code

Solution retrospective

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

Proud of the clean, semantic structure: a single focused component with clear class naming and minimal CSS.
The visual hierarchy feels balanced (avatar → name → location → bio → links).
Links have consistent hover styling and readable contrast.
Next time I’d: introduce CSS variables (colors, spacing), add a true focus-visible style distinct from hover, and maybe add a light theme toggle for practice.

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

Vertical centering vs. keeping a footer attribution: solved by using layout (flex / fixed positioning) instead of big top margins.
Making the link list spacing feel even without hard‑coding a fixed container height: switched to a column flex layout with gap so it adapts if text size changes.

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

Best practices for improving the link focus styles so they’re obvious but not visually noisy.
Suggestions on refining spacing/line-height for better vertical rhythm in such a small card.
Advice on scaling this into a larger “profile / link hub” (naming patterns or architecture to start modularizing).
Image optimization: whether I should serve a smaller avatar size or different format for best clarity/performance.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Ankan Das’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