Submitted 9 months ago

social-links-profile-main

yassawambessaw24•100

@yassawambessaw24

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello fellow developers I have completed another mini project and I am happy about it, I also want to your help on the mobile version of this project, If there's anything I should add to make it responsive for the mobile version. Thank you in advance.

Community feedback

Daniel 🛸•44,250
@danielmrz-devPosted 9 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
0

solvman•1,650

@solvmanPosted 9 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

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord