Social Links Profile Challenge

Community feedback

• 

  Boris•2,870

  @mkborisPosted 3 months ago

  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•50

  @TalalTahir01Posted 3 months ago

  @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