Social Profile Links Card using HTML/CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  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!

  1
• 

  P

  Rupali•780

  @rupali317Posted 5 months ago

  Hello @timdogan0

  I am in agreement with @danielmrz-dev's suggestions.

  Additionally, I have a few pointers that can enhance the structure and accessibility of your code:

  1. Your project is missing a <h1>. Instead of <h2> you should use <h1>. Headings facilitate page navigation for users of many assistive technologies. They also provide semantic and visual meaning and structure to the document. A first level heading <h1> should be present on nearly all pages. It should contain the most important heading on the page (generally the document title).

  2. For the "Front-end developer and avid reader", instead of <p> you can use the quote tag <q> as it is more appropriate as a quote.

  I suggest you use WAVE, Accessibility insights to test how your project is doing in terms of accessibility.

  Let me know if this helps.

  0