3 column preview using HTML and CSS

Solution retrospective
Completed another one! 2 full weeks of these beginner projects and I think I'm sort of getting the hang of things! I know I still have a lot to improve on but it's a huge improvement from the first week lol. Thanks all for your feedback, I do read all of them even if I do not get to respond to each one :D.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Hassiai
To center .cars on the page using grid, add min-height: 100vh to the body.
In the modile design , there is no need to give . cars a min-width value, reduce the max-width value for .cars e.g:
.cars{ max-width: 350px;}
give .content the same padding value for all the sides. .content{ padding: 3rem;}
In the media query increase the max-width value for .cars e.g:
.cars{max-width: 900px}
there is no need to give .cars a margin value.Hope am helpful.
Well done for completing this challenge. HAPPY CODING
- @MelvinAguilar
Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.
Do you work on a large-screen device ?
One of the biggest problems is the large margins it uses. For example,
margin: 14rem 21rem 10rem;
: 21rem is 336px of margin on one side, giving 672px of margin total.When using the DevTool, keep in mind that the screenshot was taken with a resolution of 1440px. Your screenshot has a lot of white space due to the large margin. consider using a smaller margin or remove it
Other suggestions:
- You should use only one
<h1>
tag per page. The<h1>
tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires thatSedans
,SUVs
andLuxury
are headings, but you can use the<h2>
tag instead of the<h1>
tag. You can read more about this here.
- You should use the
<a>
tag instead of the<button>
tag because theLearn More
button is a link to another page. Use buttons to perform actions like submitting a form or closing a modal and use links to navigate to another page. You can read more about this here.
- Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding
aria-hidden="true"
and leaving its alt attribute empty:
<img src="./images/icon-sedans.svg" alt aria-hidden="true"> <img src="./images/icon-suvs.svg" alt aria-hidden="true" > <img src="./images/icon-luxury.svg" alt aria-hidden="true" >
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
- You should use only one
- @myrojoylee
OK, this isn't feedback on myself, but a question. I line it up with the design it provides me but I'm always ending up super off when it loads on here. I have dev tools open and it says I'm all lined up but here it always isn't. When I open the site on my monitor it looks totally fine...Someone help lol. Thanks again :).
Join 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