social link profile using flexbox

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello @mkhantk!

  Your solution looks great!

  📌 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!

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE LINKS:

  • The links like Github, Frontend Mentor are needed to be actual <a> elements.

  ---

  • This is the current markup,

  <div class="social">GitHub</div>
  <div class="social">Frontend Mentor</div>
  ...
  

  ---

  • In order to make this solution accessible, we need to use <a> elements with href attribute. Here's the example

  <a href="#" class="social">GitHub</a>
  <a href="#" class="social">Frontend Mentor</a>
  ....
  

  • Additionally you need to add display: block rule for social so that we could properly place the socials on component.

  ---

  • If you have any questions or need further clarification feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  1