Responsive solution for the Clipboard landing page
Design comparison
Solution retrospective
Any feedback would be appreciated
Community feedback
- @FluffyKasPosted over 2 years ago
Hiyo,
Your solution looks pretty good on all screens ^^ There's a few small issues I noticed:
-
The grayish background image on the very top doesn't fully cover the whole page at some widths (check between 635px and 775px).
-
You're missing some landmarks. The very least you should always have a
main
element on your website, all the sections you have can just go inside this! -
Alt texts: I keep recommending this article for everyone, you should check it out too ^^ The problems in your case would be the following: it's unnecessary to include words like logo, image, etc when writing alt texts. You're using an
img
element, so it's self-explanatory. Instead, you could just use the company's name as an alt, like "Clipboard." or "Google." If you can't come up with any meaningful alt texts for your images, that probably means the image is decorative, so you can just leave the alt text empty! -
You could wrap your social icons in
a
tags, as they're supposed to be links to social media websites. If you do this, you should also add aria-labels to describe them (rules for this are similar to alt texts:aria-label="Facebook"
, etc will work the best.
Overall, I think you did really great though! Happy coding!
Marked as helpful1@Salah1221Posted over 2 years ago@FluffyKas Thanks for your feedback! That was really helpful. I'll try to fix all the issues mentioned in your reply.
0 -
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