Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Loopstudios landing page

Dev eMTi 60

@dev-emti

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


please rate my code and can give me some tips and trick :)

Community feedback

Eray 1,410

@ErayBarslan

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord