responsive social-link-profile

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container"> and the <div class="attribution"> to a <footer class="attribution">. The div that contains both should be removed, it has no use
  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box
  • If you didn't apply the reset, you can add margin: 0 to your body, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply the margin again using media querys
  • Instead of using margin to center your content in the center of the screen, you can use the flexbox properties in the body:

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px; /* Separate the main from the footer */
      background-color: rgb(29, 27, 27);
      min-height: 100vh;
      margin: 0;
  }
  

  • For the images to be seen correctly in github pages, you must add a . to the beginning of the path. For example, the correct form for the avatar image would be: src="./image/avatar-jessica.jpeg"

  Marked as helpful

  0