Design comparison
SolutionDesign
Solution retrospective
please rate my code and can give me some tips and trick :)
Community feedback
- @ErayBarslanPosted about 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 usearia-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 empyalt
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 helpful1 - logo is part of the header but it shouldn't be inside
Please log in to post a comment
Log in with GitHubJoin 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