Submitted 2 months ago

Social Links Profile

Bailey Frye• 90

@baileyfrye1

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?

Hi everyone! Overall happy with how this came out. I used the PerfectPixel extension for the first time and although it was a little bit of a learning curve, I am happy with the result. The area I'm not very happy with is that I used defined values for the width and height which I usually try to avoid, if anyone has any recommendations on how to avoid that with a card this size that would be greatly appreciated.

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

Overall I didn't have any issues with this challenge, the only area that took some reworking was fixing the width, height, and padding for the mobile version vs the desktop version.

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

If anyone has any recommendations for any of my CSS I would love to hear it! I've been focusing mostly on React recently so my CSS is a little out of practice.

Community feedback

Daniele• 300

@dedo-dev

Posted 2 months ago

Hey there, personally I set just a max-width on the card, so it can be responsive from 320px I didn't use height I achieved that with the spacing between elements. I like your solution on the links list with grid, I used flex for everything😅 My solution is not pixel-perfect but I'm not sure if isn't because I keep the footer. Well done mate ✌️

PS. Add alt text on the image and set it a little bit smaller.

PPS. Is the list still accessible if we wrap it with a tag? I wrapped the a with li

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