Design comparison
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- It is best practice to have separate files for you HTML and CSS code. It helps keep things organized and make it easier to maintain.
- To properly center your content to your page, you will want to add the following to your
Body
element (this method uses CSS Grid):
body { min-height: 100vh; display: grid; place-content: center; }
More Info:📚
- The “car images/icons” in this component are purely decorative; They add no value. So their
Alt Tag
should be left blank and have anaria-hidden=“true”
to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The
anchor tag
will achieve this.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1 - @HassiaiPosted almost 2 years ago
Replace <div class="container"> with the main tag and <h2 class="car-type-title"> with <h1> to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
To center. car-container on the page using flexbox, add align-items: center and min-height:100vh; to .container to center it . there is no need for a margin value in .container.
Increase the value of grid-template-columns to get the desired width in the design
Hope am helpful
Well done for completing this challenge. HAPPY CODING
Marked as helpful1
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