Responsive social link profile with HTML and CSS

Community feedback

• 

  Dylan Heslop•2,440

  @dylan-dot-c

  Posted 8 months ago

  You did good for this challenge! But you overused flex only a little as you are using it to center-align text instead of just using align: center. Other than that, you forgot to add hover styles on the links and try to put atleast the fake or the main url like https://github.com to make it more realistic.

  You could also put the links in a ul since they are related and close but it might need extra css code for that.

  Overall you did good and you could take a look at my solution to see how I did it

  11

  Marked as helpful
• 

  Adriano•42,890

  @AdrianoEscarabote

  Posted 8 months ago

  Hi Fraol T., how’s everything? I think your project turned out great! However, I have some feedback that I think might 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 amazing.

  I hope this is helpful. 👍

  10