Submitted 7 months ago

Social links profile component using Tailwind CSS

Maryam Nasir• 150

@maryam-nasir

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?

I have newly learnt Tailwind CSS framework and used in this project for styling.

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

The most challenging thing in my opinion is to guess the spacing between the elements, font weights, padding, etc.

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

What other efficient approaches can I use to design the same layout?
Any feedback on how my code can be improved in terms of code quality and accessibility?

Community feedback

Noel Hoppe• 350

@noelhoppe

Posted 7 months ago

Hi,

Use min-h-screen on <main> to avoid bugs when the contents overflow
Set p-10 to your card container because the padding is equal on all four sides
"London, United Kingdom" seems to be a <p> tag
Improve the link structure (use <ul> and <li>instead of <div>):

<ul>
<li><a href=""></a></li>
...
5. Use flexbox in your card instead of using so much margin properties. 
Happy coding!
</ul>

Marked as helpful

Maryam Nasir• 150

@maryam-nasir

Posted 7 months ago

@noelhoppe Thank you so much for the feedback. Will surely look into it to improve my solution.

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