Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social links profile

@stefanelli990

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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 efficiently I was able to do it using Tailwind. Its utility-first approach allowed me to quickly apply styles and maintain consistency without writing a lot of custom CSS.

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

One of the main challenges I faced during this project was the lack of access to the Figma design file. Without a detailed design reference, achieving pixel-perfect accuracy was more difficult. To overcome this, I relied heavily on the design preview provided and meticulously measured visual elements using browser developer tools. I focused on closely matching typography, spacing, and layout, paying attention to small details like padding, margins, and alignment.

Community feedback

@aredean

Posted

Hi, I experienced the same thing when I couldn't access the Figma file. I had to open the design image sample into Figma and re-measure it.

Initially I also immediately used the tailwind-css class to create components, but indeed tailwindcss will not be completely the same because as far as I know they work with rem sizes, while design uses px design; Similar to what you designed.

Finally, I made it with a custom class and custom style to get the closest pixel-perfect.

But, overall we have similar challenges and similar solutions. Keep up the spirit.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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