Social Links Profile using HTML and CSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 12 months ago

  This is missing some essential html. The list of links must be an actual list, with a link inside each list item.

  You also can't have duplicate IDs in html. This challenge doesn't need any IDs anywhere. But if you want to learn about what the ID attribute is for I've written a full post about that: https://fedmentor.dev/posts/id-attribute-masterclass/.

  Other tips:

  • it's better for performance to link fonts in the html head instead of css imports.
  • the max width on the component should be in rem.
  • the component must not have a height.
  • this is extremely difficult to read at the moment because of having multiple style declarations on each line. I recommend you install a linter like prettier to handle formatting automatically for you.
  • to center the component on the screen use flex properties on the body along with min-height 100vh, not huge margins.
  • Font size must never be in px. This is really important. Use rem.
  • on a similar note, this is all really tiny at the moment. The style guide will have said what the font size should me, you just need to convert it to rem before use. That will be the size of the main paragraphs.
  • the links won't need explicit widths. Instead they should be display block or width 100% and the components padding will prevent them hitting its edges.

  00