Social Links Profile using Pure CSS

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hello again, I did leave some feedback you requested on your last solution, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • I would put these into a <ul> <li>, and the text should be wrapped with a <a> so it is accessible with a keyboard using the tab key, Using an <a> tag for navigation is semantically correct, improves accessibility for screen readers, and ensures consistent behavior across browsers, unlike a <button> or a <div> not intended for links.

                      <div class="social-media">
                          <a href="https://github.com/abiyyuaqzal" target="_blank">
                              <button class="github">GitHub</button>
                          </a>
                          <a href="https://www.frontendmentor.io/profile/abiyyuaqzal" target="_blank">
                              <button class="frontend-mentor">Frontend Mentor</button>
                          </a>
                          <a href="https://www.linkedin.com/in/aqzal-abiyyu-nugroho-0b968b128/" target="_blank">
                              <button class="linkedin">LinkedIn</button>
                          </a>
                          <a href="https://www.x.com/azaaleya" target="_blank">
                              <button class="twitter">X</button>
                          </a>
                          <a href="https://www.instagram.com/azaaleya?igsh=Mjl6N2RocGIxMXds" target="_blank">
                              <button class="instagram">Instagram</button>
                          </a>
                      </div>
  

  • Your heading elements <h1><h4> Missing <h2><h3>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

                          <h1 class="name-user">Aqzal Abiyyu Nugroho</h1>
                          <h4 class="location-user">Jakarta, Indonesia</h4>
  

  • Image does not need to be wrapped in a <div> on its own, serves no purpose.

                      <div class="avatar">
                          <img class="avatar-img" src="./assets/images/DSC03204-min.JPG" alt="avatar">
                      </div>
  

  I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

  Marked as helpful

  0

  ---

  

  Aqzal Abiyyu Nugroho•90

  @abiyyuaqzalPosted about 2 months ago

  ooh my bad, so if we want to put the link we dont use button instead <li> and <a> and for h1,h2,h3 should be sequentially right? @Stroudy

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @abiyyuaqzal, Yeah exactly, Buttons are best used for interactive elements that trigger actions like submitting forms, triggering events, or starting dynamic processes. They provide clear calls to action, support accessibility, and are ideal for tasks requiring user input or engagement. You got this bro!

  0
• 

  VIvan Chauhan•40

  @vivanchauhanPosted about 2 months ago

  close to the reference image good job buddy

  0