Social links profile with html/css and js for animation

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 6 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

  Also, it's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

  Here's and example on how you can refactor your code:

  After Refactoring

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

  I hope you find this helpful!

  Keep up the excellent work!

  0
• 

  Rayane Taguti•80

  @tagutirayanePosted 6 months ago

  First of all, you are using sooo many divs, this might not be necessary. For example, this example is cleaner and works just as fine, adjusting css:

  <div class="flexbox"> <img src="assets/images/avatar.png" alt=""> <h1>Name</h1> <h2>Location</h2> <p>"Front-end developer and avid reader."</p> <div class="box-links"> <a href="https://github.com/">Github</a> <a href="https://www.frontendmentor.io/">Frontend Mentor</a> <a href="https://www.linkedin.com/">LinkedIn</a> <a href="#Twitter">Twitter</a> <a href="#Instagram">Instagram</a> </div> </div>

  This would minimize your html and css a lot, try it if you want =)

  0