Skip to content
Submitted 3 months ago

Social Profile Card for web and mobile screens using HTML and CSS

emeraldknytt•90
@emeraldknytt
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 am quite impressed to have built the profile card without using Figma starter pack. While it took me a significantly longer time to get the values right, I liked the challenge it posed. I would like to purchase the pro plan as I will greatly benefit from using it to further improve on my skills. Thank you, Frontend Mentor!

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

The biggest challenge I faced was in trying to make sure that my solution mimics the design as best as I could afford to get it done without using Figma. Also, I struggled a little with the socials components, not knowing if a `` tag with border property was better than using a button tag. I eventually went with the latter as it made more sense that those components links and are meant to be clicked.

Community feedback

  • yahappylemon•170
    @yahappylemonPosted 3 months ago

    I also spent a lot of time and effort on the design without the Figma file😂

    As for the social links part, I went for <a> tag with padding instead of <button>, since there's a href attribute on <a> and it seems more semantic in my opinion. But I think both ways will do the job!

    Anyway, you did a great job!

    Marked as helpful
    0
  • emeraldknytt•90
    @emeraldknyttPosted 3 months ago

    I do agree it is quite frustrating working on the solution without the Figma pack, I will consider getting the pro pack as the tasks increase in complexity. Thank you for your encouraging comment!

    1

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