Frontend Mentor | social-links-profile-main coding challenge solution

Community feedback

@danielmrz-dev

Posted 8 months ago

Hello @yassawambessaw24!

Your solution looks great!

I have a couple of suggestions (about semantic HTML) for improvement:

📌 First: Use <main> to wrap the main content instead of <div>.

Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

📌 Second: Don't skip heading levels - start with <h1>, then use <h2>, and so on.

Unlike what most people think, it's not just about the size and weight of the text.

The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading.
<h6> defines the least important heading.
Only use one <h1> per page - this should represent the main heading/title for the whole page.

All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!

Marked as helpful

solvman• 1,670

@solvman

Posted 8 months ago

Hi @yassawambessaw24 👋

Very well done! 🎊🎉🚀

I like how you properly use h2. Remember, heading levels represent levels of heading subsections, not typographical decoration. It would be best if you did not skip sections; h1 should be followed by h2 and so on. I suggest you replace <h5> with a paragraph <p> element and address the appearance using a class. In this project, you could temporarily add a visually invisible h1 element to avoid breaking hierarchy rules. You may read more about heading hierarchy in HTML - Live Standard - Headings

Visually hidden class for the h1

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

I love your use of the semantic HTML button element. I suggest you wrap the main content of your HTML with the <main>, and use <article> element to wrap your card. Remember, div elements are non-semantic elements. Strive to use semantic elements where it is possible. It will benefit SEO and the accessibility of your project big time.

<body>
    <main>
      <h1 class="visually-hidden">Profile card project</h1>
      <article class="card">
        <img
            src="./assets/images/avatar-jessica.jpeg"
            alt="avatar"
            class="card__img" aria-hidden="true"
          />
        <h2 class="card__name">Jessica Randall</h2>
        <p class="card__location">London, United Kingdom</p>
        <p class="card__description">
            "Front-end developer and avid reader."
        </p>
        <div class="socials">
          <button class="button">GitHub</button>
          <button class="button">Frontend Mentor</button>
          <button class="button">LinkedIn</button>
          <button class="button">Twitter</button>
          <button class="button">Instagram</button>
        </div>
      </div>
    </main>
  </body>

Another minor tweak that adds visual attractiveness to your project is to have a bit slower transition of color on :hover; consider adding transition to your button class:

button {
    transition: all 0.5s;
}

Otherwise, very well done! 🚀 Impressive! 🎉 Keep it up! 👍

Marked as helpful

social-links-profile-main

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community