Social Links Solution (with a little customization)

Community feedback

• 

  Carl•855

  @CarlHummPosted 10 months ago

  Hi there

  Good job on the solution. It's always fun to extend/customize a solution and make it your own.

  1. Nest <a> inside <li>

  Instead of wrapping your <li> with <a>, I would nest the anchor tags within the list item and apply the .button class like so <a class="button"></a>

  That way the anchor tag defines the size for the interactive area as-well as the size of the list item.

  Nesting links within list items is the common convention as shown in this example. In general block level elements such as <li> should contain inline elements such as <a>, <span>, with some exceptions with flexibility brought by HTML5.

  2. Use semantic <nav> element to represent navigation

  As the links are external links that point offsite I would use anchor elements within a nav element. At the moment you have a div for .social-links, this could be a nav element instead.

  I would suggest a structure similar to this

  <nav>
  <ul>
  <li> <a> </a> </li>
  </ul>
  </nav>
  
  

  3. Use elements for meaning, not styling

  1. Name should not be <h1> as it would likely not be the main page title in a real application/website, I would use an <h3> personally.
  2. Location should not be <h2> but a paragraph or span as it's subtext to your <h1>
  3. Elements with class .bio-snippet could use <ul> and <li>, as to me the information reads like a list

  4. Useful to think of the larger context

  If we think of this component as a small part of a larger real website/application, then the main title, often in the hero, would be the <h1>. The headings outlining each major section would be <h2> and headings within those sections, and within individual cards would be <h3>. Of-course, this is just a learning exercise and without an <h1> it would throw errors in the validator. You could create a hidden page title <h1> for screen readers by applying an .sr-only class if you wished to overcome this.

  If unsure on element usage, sometimes it can be useful to look around the internet at a variety of tech websites and inspect element on UI components with similar relationships between information (product cards, search results listings, solutions cards, etc).

  5. Take my advice with a pinch of salt

  I'm still learning so don't know everything - particularly regarding accessibility. The Front-End Mentor Discord is a good place to ask about that kind of thing. Below are also some helpful resources regarding accessibility.

  1. Understandingaccessibility
  2. Fedmentor
  3. Learn Accessibility - MDN
  4. Webaim - Htmlcheatsheet/
  5. Deque - Blog
  6. a11yproject

  Cool dog.

  Marked as helpful

  1

  ---

  

  Jon D•190

  @jcad57Posted 10 months ago

  @CarlHumm Wow thank you! So much information! This all makes so much sense and going to put into practice moving further. Will hop in the discord as well 😃 cheers

  0