Skip to content
Submitted 8 months ago

Social links profile component using Tailwind CSS

Maryam Nasir•150
@maryam-nasir
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

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
    @noelhoppePosted 8 months ago

    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
    0
    Maryam Nasir•150
    @maryam-nasirPosted 8 months ago

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

    0

Please log in to post a comment

Log in with GitHub

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