Social Links Profile: Responsive and Mobile-First Design HTML & CSS

Community feedback

• 

  nanikore0•100

  @nanikore0Posted 6 months ago

  Hey! Nice work on your solution. I like how you make the use of different CSS files to make the code more organized, and I also like the use of semantic HTML.

  Here are my suggestions:

  HTML:

  • You can use the <footer> tag instead of a div with a class of footer. Using semantic elements clearly defines the purpose of the element to the browser.
  • Don't put your site's header/menu/footer (repeated content) in your <main>. From Should the header and footer tags be inside the main tag on stackoverflow

  CSS:

  • Import fonts locally using:

  @font-face {
      font-family: "Inter";
      src: url(../../assets/fonts/Inter-VariableFont_slnt\,wght.ttf);
  }
  

  • The website breaks when trying to zoom too much and you can't see all of the content. This can be fixed by centering the card container using:

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100svh;
  }
  

  And removing the following line from .main__container: height: 100vh;

  But other than that, congratulations on completing this project! Hope this helps 🙏

  Marked as helpful

  0