Design comparison
Solution retrospective
Hey everyone! Just finished this challenge and would love some feedback. I have an issue with the hover state of the learn more links, the grid expands when hovered and I am not sure why.
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, really awesome work on this one. Desktop layout looks really nice, just a bit taller. The site is responsive and the mobile state looks really nice as well.
Others already gave feedback on this, just going to add some suggestions as well:
- Always have a
main
element to wrap the main content of the site. For this usemain
tag on the.grid-container
selector. - Avoid using
height: 100vh
on a large container like the.grid-container
as this makes the element's height capped based on the viewport/screen's height. Instead usemin-height: 100vh
so that the element will expand if it needs to. - Add an extra
aria-hidden="true"
on the car icons since they are only decorative images. Decorative images should be hidden for screen-reader at all times by usingalt=""
andaria-hidden="true"
to theimg
tag or onlyaria-hidden="true"
if the image is usingsvg
. - On a site, always have a single
h1
. Since there are not visible text that are suitable to beh1
, theh1
would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, theh1
would have likesr-only
class and the text-content should describe what is the main-content is all about. Theh1
could be placed as the first text inside themain
.Have a look at Grace's solution on this challenge inspect the layout and see the usage ofh1
as well the stylings applied to it. - When wrapping up a text-content, make sure that it is inside a meaningful element like
p
tag or heading tag and not using likediv
to wrap the text.
Aside from those, great job again on this one.
Marked as helpful1 - Always have a
- @davidbdyerPosted about 3 years ago
Your solution is not responsive. Best practice is to start with mobile first.
Marked as helpful1 - @rezaboxPosted about 3 years ago
hello Aaron20 this project is not responsive me today read your code and clear code and responsive code and push your githup so you can see my code and Comparison to your code .
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