Responsive social links profile using flex-box

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 4 months ago

  Hey there!

  Congrats on finishing the challenge! ✅

  Your solution looks awesome!

  📌 It's a good idea to use semantic HTML elements like <ul> and <li> for lists. This makes your code more accessible, maintainable, and meaningful.

  Here's an example of 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>
  

  Using <ul> and <li> makes your content structure clearer, which is better for screen readers and search engines. Plus, it follows best practices for HTML.

  Hope this helps!

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  Amin Alizadeh•200

  @M-AminAlizadehPosted 4 months ago

  Hey @danielmrz-dev

  Thanks for the feedback

  It resolved

  Best,

  0
• 

  Mad Artist Photography•100

  @MadArtistPhotoPosted 4 months ago

  Okay, I re-did the code and the A stays within the LI. Two examples. One with the width of the clickable area based on the width of the text in the link (more text, wider link area). And the other with the clickable area set to the width of the parent element (containing DIV) so all links can be the same width. -CodePen here-. I'm sure there is a cleaner and more elegant way to code this, but it works for me.

  Marked as helpful

  0
• 

  Mad Artist Photography•100

  @MadArtistPhotoPosted 4 months ago

  This comment was deleted 4 months ago

  0

  ---

  

  Amin Alizadeh•200

  @M-AminAlizadehPosted 4 months ago

  Hey @MadArtistPhoto

  According to your code you kind of overflow the <a> tag from its container <li> and fire the hover effect on it directly

  That's a good approach thanks for sharing

  Happy coding

  0

  

  Mad Artist Photography•100

  @MadArtistPhotoPosted 4 months ago

  Yeah, I figured that out so I deleted the comment until I could go back and figure out how I have done it in the past.

  0