3 column preview page using html and css flex and grid.
Design comparison
Community feedback
- @VCaramesPosted about 2 years ago
Hey @Iniy96, some suggestions to improve you code:
-
The car images/icons serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
-
Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.
-
Your button has the incorrect
font-family
applied and it does not have the:hover
effect applied. -
Start your media query bit later. Your buttons begin to break before the media query starts.
Happy Coding! 👻🎃
Marked as helpful0@Iniy96Posted about 2 years ago@vcarames Thanks for your feedback. I just got to know about the aria-hidden='true' property. I'll try to use it in my further projects. The buttons were created with the anchor tag only. But the thing I have included is '#' in the href=" segment".
0 -
- @AdrianoEscarabotePosted about 2 years ago
Hi Iniyavan, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To improve the accessibility of the project you could have put an h1. Every page must contain a level 1 header, for people who use screen readers, identity what the main title is.
Prefer to use
rem
overpx
to have your page working better across browsers and resizing the elements properlyThe rest is great!
I hope it helps... 👍
Marked as helpful0@VCaramesPosted about 2 years ago@AdrianoEscarabote
Using an <h1> heading would not make any sense for this challenge. By giving one of the headings an <h1> heading, you are stating that particular heading holds a higher level of importance.
Since each heading in this component holds the same level of importance the <h2> Heading is better suited for these headings (it is also reusable and not limited to only one like the <h1> heading).
On top of that, this a component, meaning it is to be used a larger site with many other components. So it would never have an <h1> heading.
1@AdrianoEscarabotePosted about 2 years ago@vcarames you're right about the component, I wouldn't worry too much about the HTML report as it's just a component and not a complete website.
0@Iniy96Posted about 2 years ago@AdrianoEscarabote Thanks for your feedback. The thing that I didn't use h1 is that the page contains 3 headings of the same importance. And I am learning rem and em units. so that in my future projects I ll start using those units as well.
1
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