Design comparison
Solution retrospective
Working on getting faster and just practicing on staying consistent between different project. Any feedback is welcome, as always.
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, Markus! 👋
When completing challenges, avoid focusing on speed. Instead, focus on quality by testing with keyboards, zoom, and screen readers.
A couple of things I would like to suggest:
- Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen readers (spelled letter by letter).
- For the car icons, I recommend using
img
elements. The circle is already on the icon itself. So, there's no need to create it. - Replace all the
h3
withp
element. Those are not headings. - Always specify the
type
of thebutton
. In this case, set the type of them astype="button"
. It will prevent the button from behaving unexpectedly. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons - Never limit the height of the
body
element. It will not allow the users to scroll the page if the page content needs more height. Try to look at the site on a mobile landscape view to see the issue. So, I recommend usingmin-height
instead.
For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution. I wrote the technique that I used on the
README
.I hope this helps. Happy coding!
Marked as helpful1@mhjarvisPosted about 2 years ago@vanzasetia Thank you. This has been some of the best feedback I've gotten. I will take all your points into account moving forward. Thanks again.
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