Social links profile. HTML | CSS | MOBILE-FIRST WORKFLOW

Community feedback

• 

  Thomas Weitzel•170

  @thomasweitzel

  Posted 7 months ago

  Your solution for the "Social Links Profile" challenge demonstrates good use of semantic HTML and a well-structured CSS approach. The layout is straightforward, responsive, and visually cohesive, aligning with the requirements of the challenge. There exists only minimal improvement in terms of accessibility, maintainability, and visuals.

  • The use of semantic elements such as <main>, <section>, and headings (<h1>) is excellent.

  • The media query ensures a responsive design for screens smaller than 425px.

  • Adjustments for font sizes and padding are thoughtful.

  • The hover effect on the .socials buttons is intuitive and visually distinct. The use of transition effects (transition: all 0.2s ease-in-out;) is a nice touch!

  • The CSS is well-organized and avoids unnecessary properties.

  • The inclusion of font-optical-sizing: auto; is an advanced CSS feature. Nice!

  • Missing alt attribute content: The alt attribute for the avatar image is empty. To improve accessibility, provide descriptive text such as alt="Jessica Randall's profile picture".

  • The attribution link (Your Name Here) should be updated to your name or GitHub profile. Be proud of your work!

  • You have tagged your solution to this challenge with the #react tag, although it's not a React application.

  Your solution effectively meets the challenge requirements with only minor room for improvement in accessibility. Great job!

  10

  Marked as helpful
• 

  Adriano•42,870

  @AdrianoEscarabote

  Posted 7 months ago

  Hey Hendrixx, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  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.

  Everything else looks great.

  Hope this helps! 👍

  00

  Marked as helpful