Social Profile Links HTML CSS

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @RKennedyy,

  I hope you had fun coding this project, it looks great!

  A bit of friendly constructive feedback:

  • If you would like to center the card you could try this on your body tag:

  body {
      background-color: black;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
  }
  

  This way you don't have to center it using margin: auto with margin-top. I put margin: 0 on the body as well in your code so there aren't any scrollbars showing up. I normally put this in a CSS reset.

  • You could try wrapping all your links in a unordered list ul to give it more semantic meaning, then you can use a layout tool like flex to style them how you want. Using flex instead of margins to layout your elements will make them more predictable and scalable. Also try using a tags for your links instead of a button tag. Generally you would use a tags if the link wil navigate the user to a different website or page and a button if you something to happen on the page. You can style both to look like a button!

  • Try to use more descriptive and meaningful classes like .card and .card-title for example to help yourself style things more easily and other developers to read your code.

  • To make an image a circle you can use border-radius: 50% for your interest.

  I notice you are experimenting a lot with different properties and values to see what they do, which is a good thing. However try to understand what each thing does exactly to the element you apply it to and the elements around it. It's important to master the fundamentals.

  Some documentation you might find intereseting:

  • Flexbox Guide
  • MDN

  I hope you find my feedback helpful and if you have any other questions I would be glad to answer them.

  Marked as helpful

  0