Loopstudios landing page

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hey there, excellent work with this one! Design is close, it's responsive and dropdown works as supposed to. Some suggestions:

  • logo is part of the header but it shouldn't be inside <nav> because it does nothing related to navigation. You can move it out of nav.
  • Also instead of <div> you should be using it as link and in this case analt representing image will make more sense like : <a class="logo" href="#"><img src="./images/logo.svg" alt="loopstudios"></a> This is the conventional approach for logo but if you wish to keep it just for design purposes you can use aria-hidden="true" so that screen readers skips to meaningful content.
  • I'd suggest not to leave alt="" empty like this for the ones in creations section. Screen readers skips when they're empty, since they're for design purposes regarding accessibility that's alright. But an empy alt might still effect SEO results. Safest approach would be: <img class="mobile" src="./images/mobile/image-soccer-team.jpg" alt="soccer team" arria-hidden:"true"> Same goes for the bottom logo.
  • Socials are going to be link to that site in production, so instead img it's better to use links. You can use like:

  <ul class="links">
    <li><a href="#"><img src="./images/icon-facebook.svg" alt="facebook"></a></li>
    <li><a href="#"><img src="./images/icon-twitter.svg" alt="twitter"></a></li>
    ...
  </ul>
  

  • Lastly, for copyright most fitting element is <small>. You can replace it with span. This makes the last of my suggestions. Great work again and happy coding :)

  Marked as helpful

  1