Design comparison
SolutionDesign
Solution retrospective
This was a great challenge. I learned to validate forms and it was great to practice CSS grid.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Deepak, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
alt=""
and addaria-hidden="true"
attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.
The rest is great!
I hope it helps... π
Marked as helpful1@DEEPAK-tech40Posted about 2 years ago@AdrianoEscarabote Your feedback is really helpful thank you.
1 - images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
- @JaneMorozPosted about 2 years ago
Hi, there! Good job πͺ
There are a few things I've noticed straight away:
- The image aspect ratio changes for smaller screens, you can fix it by using
object-fit: cover;
. You can read more here. - Also if you use image or icon inside of the button, I suggest to add
aria-label
to the <button> tag to improve accessibility. - It's better to remove <h1> and <span> tags from logo, they are for the text. Just <img> tag is enough. You can then change <h2> to <h1> down the page.
Keep it up! And good luck π
Marked as helpful1@DEEPAK-tech40Posted about 2 years ago@JaneMoroz Your feedback is really helpful, thank you
1 - The image aspect ratio changes for smaller screens, you can fix it by using
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