CSS flex box

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted about 2 months ago

  Hi @EdwinNdambiri 👋,

  You’ve done an amazing job so far! 🚀 The effort you’ve put into the project is evident, and it’s shaping up really well. Here are some friendly suggestions to further improve your code:

  1. Enhance the Semantics of Social Media Links 🌐

     • It’s better to use <ul> and <li> elements to structure your social media links for better semantics and accessibility.
     • The <a> (anchor) tag is critical here because social media links are meant for navigation, and the anchor tag communicates this purpose to both users and screen readers. Here's a quick example:

       <ul class="social-media-links">
         <li><a href="https://github.com" class="social-media-account">GitHub</a></li>
         <li><a href="https://frontendmentor.io" class="social-media-account">Frontend Mentor</a></li>
         <li><a href="https://linkedin.com" class="social-media-account">LinkedIn</a></li>
         <li><a href="https://twitter.com" class="social-media-account">Twitter</a></li>
         <li><a href="https://instagram.com" class="social-media-account">Instagram</a></li>
       </ul>
       

  2. Switch width to max-width 📏

     • Using max-width instead of width in your .wrapper ensures that your layout remains responsive on various screen sizes. This small tweak improves adaptability without sacrificing design integrity. Updated example:

       .wrapper {
           background-color: hsl(0, 0%, 12%);
           max-width: 375px;
           border-radius: 14px;
       }
       

  These changes will make your code more accessible, responsive, and scalable—great traits for any web project! Keep up the fantastic work, and feel free to reach out if you have any questions! 💡✨

  Best regards,
  Aakash Verma 🙌

  Marked as helpful

  0