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

P

@itsmesrishti

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?

That I used flexbox and position to center the card but with responsive media query for smaller screen changed it so that user can scroll and so that the footer doesn't behave weirdly.

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

The main challenge I encountered was to do with deciding the colors of the design.

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

I would like you to check if my html is semantic. If you have any other suggestions as well they are most welcome!

Community feedback

@rahulkumar215

Posted

Hello Srishti👋

Congratulations on successfully completing the challenge! 🎉

  • Your code is well written and your colour choice is good.

  • However, your footer section blends with background and is hard to see.

  • also when writing media-query, try using em units rather than px, for all browsers and devices view consistency

like this :-

@media screen and (max-height: 720px) { }

to

@media screen and (max-height: 45em) { }

just divide px value to 16 and you have em value.

writing media query in em is best practice.

If you need any feedback or suggestions, I am happy to help

Good Work, Keep Grinding and Have Fun Coding!

Marked as helpful

1

P

@itsmesrishti

Posted

@rahulkumar215 Thank you for the tips!

I'll keep in mind the contrast for the footer next time! And wow I didn't know that it's considered good practise to use em for media queries!

I'll try to implement these things in my next project! Thank you!

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