@vanzasetia
Posted
Hello, Jorge! π
Good job on this challenge! π
I have some suggestions to improve this solution.
- Replace all the
<h1>
with<h2>
. There should not be more than oneh1
on a page. Many<h1>
mean many titles which can confuse the users, especially the screen reader users. - Learn more β How-to: Accessible heading structure - The A11Y Project
- The car icons are decorative images. So, leave the alternative text empty β
alt=""
. - For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.
- The website only needs one media query to be responsive. Five media queries for this challenge are overkilled. Try to simplify the styling.
- Don't change the
<html>
or the:root
font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Instead, set the page's font size on the<body>
. - Avoid using
px
unit for font sizes. Userem
orem
instead. Relative units such asrem
andem
can adapt when the users change the browser's font size setting.
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
.
Responsive 3 Column Card Component (No Media Queries) coding challenge solution
I hope this helps. Happy coding!
P.S. Remove the #backbone tag since the website doesn't use Backbone.js.
Marked as helpful
@yorchAdalbert
Posted
@vanzasetia Thanks so much man! you helped me a lot. Your implementation is pretty awesome, and I really appreciate your tips, for now on, I'm gonna implement this new technique.
@vanzasetia
Posted
@yorchAdalbert You're welcome! I'm glad I could help.