Skip to content
Submitted about 1 year ago

Social links profile component using Tailwind CSS

accessibility, tailwind-css
Maryam Nasir•150
@maryam-nasir
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

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?
Code

Please log in to post a comment

Log in

Community feedback

  • Noel Hoppe•380
    @noelhoppe

    Hi,

    1. Use min-h-screen on <main> to avoid bugs when the contents overflow
    2. Set p-10 to your card container because the padding is equal on all four sides
    3. "London, United Kingdom" seems to be a <p> tag
    4. 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

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