Frontend-Mentor-Blog-Preview

HTML:

• Remove .bg, it is not needed.

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .container to a <main>.

• "Learning" is not a button, but a <p>.

• Headings must always go in order, so you cannot start with a <h5>. Besides, this is not a heading, but a paragraph, and you should wrap the date in a <time> element: <p>Published<time datetime="2023-12-21">21 Dec 2023</time></p>.

• The profile image needs a short and descriptive alt text, without using words like "image" or "photo".

• "Greg Hooper" is not a heading, as it doesn't introduce new content. Make it a <p>.

CSS:

• It's good practice to include a CSS Reset at the top.

• Do not change the font size to 62.5% - it is bad for accessibility.

• The properties on .bg should be moved to the body.

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• The card should have a max-width in rem, not %.

• When declaring display: flex, the default value is flex-direction: row, so there is no need to set it explicitly.

• Instead of adding horizontal padding to each of the elements, add padding on all sides of the card itself.

• This challenge doesn't require any media queries. When they are needed, they should not be in px, but in rem.