Submitted about 1 month ago

Social links profile | TailwindCSS

Wall_• 30

@wall-69

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Social links profile

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

That I did a good job in my opinion without having the figma design file. And that I did it in relatively faster time than I expected.

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

That I didnt know the lengths, sizes, etc. I eventually just didnt care that much and just did it to enjoy it and not to make it perfect.

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

How to read the sizes just from the design image file. Is it just about practice? Or am I meant to use some tools to measure things from the image?

Community feedback

Boris• 2,870

@mkboris

Posted about 1 month ago

The most efficient way to match the design is having access to the figma design but if you don't have that you can use the PerfectPixel chrome extension. Also, to improve the semantic meaning of these social media links, you should use the a (anchor) tag instead of the button tag. The a tag is used for navigation to other pages, while the button tag is designed for interactive actions like submitting forms or for events like toggling content.

Wall_• 30

@wall-69

Posted about 1 month ago

@mkboris thanks, I removed the buttons and used only as after submitting because the report told me. Also thanks for the tips!

Please log in to post a comment

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