Social Links Profile using HTML and CSS

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 7 months ago

  Hello @lotusbomb!

  Your solution looks great!

  📌 It's recommended to use semantic HTML elements like <ul> and <li> for creating lists. This ensures that your code is more accessible, maintainable, and semantically meaningful.

  Here's and example on how you can refactor your code:

  After Refactoring

  <ul class="list-container">
      <li><a href="#">Github</a></li>
      <li><a href="#">Frontend Mentor</a></li>
      <li><a href="#">LinkedIn</a></li>
      ...
  </ul>
  

  By using <ul> and <li>, you convey the structure of your content more clearly, making it easier for screen readers and search engines to understand. Additionally, it aligns with best practices for HTML semantics.

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted 7 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  BODY MEASUREMENTS 📐:

  • Use min-height: 100vh for body instead of height: 100vh. Setting the height: 100vh may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation

  ---

  • For example; if we set height: 100vh then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport.

  ---

  • But if we set min-height: 100vh then the body will start at 100vh, if the content pushes the body beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0
• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @lotusbomb, congratulations on completing your challenge! It turned out really well and is almost close to the proposed design. Well done!

  I'd like to give you some tips. The first thing I noticed is about index2.html. Since it's not being used, you can delete it.

  Now, about your base HTML, its structure is somewhat correct, but it's lacking in semantics. Maintaining semantic HTML is extremely important, not only for improving SEO but also for increasing the accessibility of your page. I'll convert some parts to semantic so you can understand better.

  • <div class="design"> could be <main>, because it contains all the main content of your page.
  • <div class="picture"> could be <section>, because the content here is related to each other, but it could also be a <header>, because it's introductory content.
  • <div class="buttons"> could also be <section>, for the same reason as above. But if you changed these <button> to <a>, then instead of <section>, it would be <nav>, because it would become a dedicated navigation area.

  Now, about the structure, the <p>"Front-end developer and avid dreamer"</p> would make more sense to be outside of the <div> where the buttons are and would make more sense to be in the <div class="picture">, because the buttons form a navigation section, while the top explains about the person's profile.

  Now, a small CSS tip: avoid using font size values in px; I strongly suggest using rem instead, because rem adapts to the font settings used by the user, thus increasing the accessibility of your page.

  Once again, congratulations! Keep practicing and improving! If anything I said is confusing, please ask below, and I'll try to help in the best way possible.

  Marked as helpful

  0

  ---

  

  lotusbomb•80

  @lotusbombPosted 7 months ago

  Thank you so much for this. I'd look into this now @R3ygoski

  2