Responsive Blog Card

HTML:

• <main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

• There is no need to include "image" in the alt text, as screen readers announce that by default.

• "Learning" is a <p>.

• I would wrap the date in a <time> element:<p class="published">Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

• As this is a blog card, the heading needs a link inside.

• "Greg Hooper" is a <p>.

• .attribution should be a <footer>, and you should use <p> for the text inside.

CSS:

• Including a CSS Reset at the top is good practice.

• I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

• Remove max-width on body.

• Remove the margin on the card.

• To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;

• Except for the author image, remove all widths and heights in px.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• On "Learning", add width: fit-content - this makes it take up only the width of the text plus the padding.

• As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem or em, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.