Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile (HTML and CSS)

P

@catreedle

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am more comfortable with my workflow this time, compared to the previous two challenges. I would like to implement the best CSS practices for the next project. I am confident with my HTML structure, but maybe I have some blind spots. I am open to feedback.

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

I struggled a bit in showing the anchor tags as buttons, I am not sure that I've done the best approach. The list element positions were slightly off to the right, a quick search helped me override that behavior.

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

The mobile design doesn't look exactly like my final project. I have too wide horizontal gaps compared to what's shown in the design. Some help with this will be very much appreciated.

Community feedback

@VitorEmanoelNogueira

Posted

Hello, Purnama S Rahayu, great job, the design is great!

I have some tips that I hope help you:

  • For displaying the anchor tags as buttons, what would get them to look more similar to those of the original design is adjusting the height of them so they look bigger. On my project I used 45px of height with 13px of padding-top to adjust the content of the button;
  • Adjust the margin between the name and the location. I think just 10px between these two would get the design closer to the original;
  • If you want to get it even closer to the original, you can try to resize the image to look a little smaller;
  • To get the mobile design closer too, you can try reducing the padding a little (30px to 25px) or/and increasing the cointeiner width a little.

Overall, it's a great design! Keep improving!

Marked as helpful

0

P

@catreedle

Posted

Thank you for the feedback! @VitorEmanoelNogueira

1

Please log in to post a comment

Log in with GitHub
Discord logo

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