CSS variables and organized folder structure

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  Well done on getting this far! You’re clearly putting in the effort, and it shows. Just a few things I noticed that could enhance your solution…

  • 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="profile-card__links">
                  <a href="#" class="profile-card__link">GitHub</a>
                  <a href="#" class="profile-card__link">Frontend Mentor</a>
                  <a href="#" class="profile-card__link">LinkedIn</a>
                  <a href="#" class="profile-card__link">Twitter</a>
                  <a href="#" class="profile-card__link">Instagram</a>
              </div>
  

  • This needs to have a tag with semantic meaning <span class="profile-card__text">"Front-end developer and avid reader."</span> Problem is <span> has no semantic meaning just like a <div>.

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Still using px in some locations when you should use rem for consistency.

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

  0