social media card for myself

Community feedback

• 

  Adriano•42,780

  @AdrianoEscarabotePosted 4 months ago

  Hi Ahmad, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

  To improve the semantics and accessibility of your code, consider using the <ul> (unordered list) element to group related links. The <ul> tag is ideal for representing collections, such as a list of social media links or navigation items.

  Using <ul> not only makes your code more structured and meaningful, but it also helps assistive technologies identify the group as a related set of items, enhancing the experience for screen reader users. Additionally, this approach improves overall readability and maintainability of your HTML.

  Example:

  <ul>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
  

  In this example:

  • The <ul> wraps the entire group, indicating that these links are related.
  • Each item is enclosed in a <li> (list item), which provides a clear structure and logical grouping.

  This method is particularly useful for navigation menus, social media links, or any set of grouped items, offering better support for both SEO and screen readers.

  Pro Tip: Avoid using <div> elements alone for lists, as they don’t convey the same semantic meaning. Whenever possible, choose semantic tags like <ul> or <ol> to improve the quality of your code.

  The rest is fantastic.

  Hopefully, you'll find it helpful. 👍

  Marked as helpful

  1

  ---

  

  Ahmad•100

  @1ah90Posted 4 months ago

  @AdrianoEscarabote thank you so much Mr.Adriano your comment is more then helpful its good to learn from someone like you ❤️

  1
• 

  salilphadnis•200

  @salilphadnisPosted 4 months ago

  Design looks good and your code is very well structured and easy to understand. If I do need to give some feedback, it would scale back on the hover effect on the button that makes it the design feel a little jumpy. But I assume you added that for learning. So, its all good.

  Marked as helpful

  0