Social Links Profile using HTML CSS and media queries

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Hello @cintiavic!

  Your solution looks great!

  📌 Instead of using <div> as a container and <button> as list items, 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 how you can refactor your code:

  Before Refactoring

  <div class="card__linkbuttons">
      <button>Github</button>
      <button>Frontend Mentor</button>
      <button>LinkedIn</button>
  </div>
  

  After Refactoring

  <ul class="card__linkbuttons">
      <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

  0

  ---

  

  Cintia Vicente•80

  @cintiavicPosted 8 months ago

  @danielmrz-dev I really appreciate your feedback! It's really helpful, I've never taken notice of / learnt about taking screen readers into account. Thanks for your time!

  1