HTML | CSS | CSS FLEXBOX

Hi Michael,

Your work looks pretty good. There is an accessibility issues generated by Frontend Mentor. It is generated because you have used <h3> tag, Your page should contains at least a level-one heading i.e <h1> tag. And then set the font size according to the design in style.css.

Your can fix this issue by simply replacing you <h3> tags with <h1> tag.

Your image height is smaller than the design, it should be height: 288px;

It would be better if you add box-shadow to the card. you can add box-shadow as box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);

You can have a look to my solution. Click Here for live preview of my solution.

If you have any doubts or questions, feel free to ask.

Keep Coding!

Hi Michael, great work! I noticed that you used semantic HTML tags like <main> and <section>, which are good practice for code readability and also ease of accessibility (for e.g. using screen readers). I noticed that you used <h3>, you should always use the heading tags in order of importance, thus <h1> first in this case and then adjust the font size according to your needs in the styles.css file. Otherwise a very clean and neat job!