Social Links Solution (with a little customization)

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.