Social Links (HTML/CSS)

Community feedback

• 

  Rowan Pereira•330

  @rowanrooster

  Posted 12 months ago

  Try using padding on the .card element instead of margin. But, i think if you add even 1px of padding you should start seeing the margins - this is because of margin collapse / stacking margins.

  if im right, check this article for more on stacking margins: FreeCodeCamp

  Hope that helps, but good work! Clean code and I like the comments in the css!

  01

  Marked as helpful
• 

  Alberto José•630

  @alberto-rj

  Posted 12 months ago

  👋 Hello @kiaraaa123!

  👏 Congrats on investing your time and taking your frontend skills to the next level with the Social links profile challenge.

  I have a few suggestions that could help you improve your solution to this challenge.

  On line 34 to 38 of your index.html file: A p element does not have to be directly a child of a in this case, instead you could:

  • Add a title for your unordered list (the title should be visually hidden, as per the design, it should only be available to screen reader users)
  • Create an unordered list with a ul
  • Put each a inside an li (and each li inside the ul created)

  Note: It is recommended to do this, because in this case you have a group of links of the same kind, "your social networks".

  Useful resources:

  • The anatomy of visually-hidden
  • <ul>: The Unordered List element

  Good practices for your styles.css file:

  Avoid using the unit px in your properties. Instead, use the rem unit. This will make the layout scale correctly for people who have a different text size setting. To demonstrate go into your browser settings and change the text size to a larger value like 32px — currently your solution would still be really narrow for those people. But if you use rem it would adjust.

  Note: The px unit is generally recommended more in the border and box-shadow properties, because these properties do not change in relation to the text size.

  Useful resources:

  • PX or REM in CSS? Just Use REM

  Keep learning, coding and sharing! 🌟

  Happy coding! 🚀

  11