Frontend Mentor | 3 column preview page using html and css flex and grid. coding challenge solution

Community feedback

バレンタイン 😈• 64,190

@VCarames

Posted almost 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 helpful

Iniyavan• 220

@Iniy96

Posted almost 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".

Adriano• 34,090

@AdrianoEscarabote

Posted almost 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 over px to have your page working better across browsers and resizing the elements properly

The rest is great!

I hope it helps... 👍

Marked as helpful

バレンタイン 😈• 64,190

@VCarames

Posted almost 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.

Adriano• 34,090

@AdrianoEscarabote

Posted almost 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.

Iniyavan• 220

@Iniy96

Posted almost 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.

3 column preview page using html and css flex and grid.

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community