Skip to content
Submitted about 1 month ago

Social Links Profile using HTML & CSS

jvondungen•140
@jvondungen
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 was able to work through this challenge quickly, so I feel like my understanding of CSS styling is improving.

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

I did not have the Figma files, since I don't have a Pro account, so had to estimate the spacing and sizing. But this went okay and I think I was able to get a pretty close to the design.

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

I welcome any feedback. Responsive design below 300px loses some of the card container, so suggestions on that would be helpful.

Community feedback

  • sofiasmnk•110
    @sofiasmnkPosted about 1 month ago

    In your media query you set the card container with a width of 325px, which is why it doesn't fit in a 300px screen. You could instead set it to a width of 100%, so that it automatically resizes itself to take up the width of the screen; that way it'll size itself down when the screen gets smaller. And if you add some horizontal padding to the body, it will stop the card from "touching" the sides of the screen, which would look strange for a card with rounded corners.

    Another piece of feedback is: you gave separate .social1, .social2 etc classes for each of the social links, and then when styling in CSS had to add all those classes as selectors. Since they all look the same anyway, you could've used just the same .social class for all of them and then styled that one class. If you ever needed to have a way to differentiate and target specific social links from the list, you could use id to tell them apart. While a class is supposed to be applied to multiple elements, id is the one that should apply to just one element in a page, in order to specifically identify it.

    Marked as helpful
    0
    jvondungen•140
    @jvondungenPosted about 1 month ago

    @sofiasmnk, thanks so much for this feedback! I really appreciate it!

    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