@jairovg
Posted
Hi PMZ, congrats on your solution; here are some comments that might help you to improve it:
Accessibility and semantics
- This is your heading map:
Frontend Mentor | 3-column preview card component
2 Sedans
2 suvs
2 luxury
All headings should have a hierarchy and a meaning. You can check this checklist provided by Deque University to learn some best practices related to headings that will help you improve your structure. You may use a .sr-only
class so the missing page title may be visually hidden and help to enhance the assistive technologies experience.
- There is an axe-core ruleset that should be considered. It's related to the document title, in this case, the best practice that may be applied is
Put all unique information first. ...company’s name or brand ... should go after the unique content...
So the suggested document title should be3-column preview card component | Frontend Mentor
. - There is another tag you may use for your
.box
element instead of adiv
to improve its semantics.
Styles
- Do not let the browser have its native
focus
state to provide a unique experience across devices. Each browser may use this outline differently. - It's better to use
colour tokens
based on their semantic use rather than their colour names. It's better for future refactors or a theme feature. - I invite you to modularize your styles instead of having all of them in a single file. You may use CSS naming methodologies that may help you with this.
I hope you find it useful. I'm happy to look at your solution if you make other changes.