3 Column Preview Component using Vanilla HTML and CSS

Solution retrospective
Any feedback/thoughts are greatly appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @vanzasetia
Hi, @tizerk! 👋
The following suggestions can help you to improve your solution.
- All the car icons are decorative images. You should leave the alternative text empty.
- For your information, decorative images are images that don't add any information and serve only aesthetic purposes.
- Change all the
<h1>
with<h2>
. There should not be more than oneh1
on a page. Many<h1>
elements mean many titles which can confuse the users, especially the screen reader users. - 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.- Grace Snow explains the issue clearly — Should I change the default HTML font-size to 62.5%?
- Joshua Comeau also does not recommend that approach — The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
- I recommend setting
min-height: 100vh
instead ofheight: 150%
on the<body>
element. - You don't need to use CSS Grid to create a one-column layout with three rows on the
.main-container
. The default layout is already looking like that. - Having a three-columns layout on 1440px width is too late. You should make it a three-columns layout as soon as there is enough space.
- Set a
max-width
to the.main-container
to prevent the cards from keep growing.
I hope my suggestions help you. Have fun coding! 😄
Marked as helpful - @0xabdulkhaliq
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML 🏷️:
- Your solution generates accessibility error reports due to
non-semantic
markup
- So fix it by replacing the
<div class="attribution">
with semantic element<footer>
to improve accessibility and organization of your page.
- Use HTML5 semantic elements such as
<header>
,<nav>
,<main>
,<aside>
, and<footer>
hereafter to define these sections
I hope you find it helpful ! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
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