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 Challenge

@TalalTahir01

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?

coded 95% without any help from a tutorial or anything.

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

I had trouble styling buttons, so I had to watch a tutorial for it. Otherwise, I did everything myself and I am proud that I am starting to escape tutorial hell.

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

Understanding and adding media queries, I had problems with responsiveness on mobile screen at the end. I think I should have started with mobile first, but I did not know how. However, the end product was good for desktop screens, so I left it as is. I would like help about understanding media queries and how to implement them to make mobile responsive sites.

Community feedback

Boris 2,870

@mkboris

Posted

Hi TalalTahir01 nice work, there seems to be an issue with the link to the github repo. This challenge doesn't necessarily need any media queries. You can learn about responsive design and mobile first development here Mobile-First Development.

Some suggestions to improve your work

  • All content should be wrapped within landmarks. Wrap a main tag around card. and a footer for the attribution
  • The buttons are supposed to be anchor tags a styled liked buttons. Buttons are for events like toggling content or submitting a form and anchors are for navigation. In this case clicking on the link will navigate you to a new page, so you should should use the anchor element and style it like a button.
  • The .small-box needs a max-width defined not a fixed width and should be defined in rem, also no height. Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to and the units should be relative units like rem.
  • You can easily center the card by adding on the body so you wont have to use margins center it
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset.

Hope this helps

Marked as helpful

0

@TalalTahir01

Posted

@mkboris thank you so much for putting the time in it. I'll dive deep at all the things you've said try not to make the same mistakes in the future.

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