Social Links Profile

Community feedback

• 

  P

  solvman•1,650

  @solvmanPosted 10 months ago

  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. 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;
  }
  

  Use should look into using more semantic HTML instead of plain <div> elements for better accessibility. Consider replacing <div> elements with <section> semantic elements to divide your HTML document logically. You may use the <article> element to wrap the card and the button element to represent buttons. Consider wrapping everything with the <main> element. For example:

     <main>
        <h1 class="visually-hidden">Profile card project</h1>
        <article class="card">
          <session class="profile">
            <img
              src="./assets/images/avatar-jessica.jpeg"
              alt="avatar"
              class="profile__img" aria-hidden="true"
            />
            <h2 class="profile__name">Jessica Randall</h2>
            <p class="profile__location">London, United Kingdom</p>
            <p class="profile__description">
              "Front-end developer and avid reader."
            </p>
          </div>
          <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>
  

  You may read more about section and sectioning content in the following articles:

  ⭐️ HTML - Living Standard - Sections

  ⭐️HTML - Living Standard - Sectioning content

  Also, I noticed that your :hover does not change the background of the buttons, which could be achieved like this:

  .button:is(:hover, :focus) {
    background-color: hsl(75, 94%, 57%);
    color: hsl(0, 0%, 20%);
  }
  

  You could add a transition property to the button to make the color transition more visually enjoyable.

  button {
       transition: all 0.4s;
  }
  

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

  Marked as helpful

  0

  ---

  

  Olu Dev.It•90

  @OluDevItPosted 10 months ago

  Thank you for the feedback, its appreciated @solvman

  0