html css

HTML:

• The <header> element is used for content that repeats across several pages - think of what you often see at the top of a webpage - a logo and a navigation bar are typical elements in a header. Change "Learning" to a <p>.

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

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

• Remember that all images needs the alt attribute. Decorative images should have empty alt text:alt="". This profile image has meaning, thus it needs a short description, for example "Headshot of Gary Hooper".

• "Greg Hooper" is also a <p>. Remember, headings always say something about the content that follows.

CSS:

• Use the style guide to find the correct font-family, and remember to specify a fallback font:font-family: 'Figtree', sans-serif;.

• I would decrease the padding on body to around 1rem.

• On body, you can remove justify-content: center, as it is already centered using place-items: center.

• Using Grid is fine, but you can also center the card using Flexbox on the body:

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

• Remove margin-top on the card.

• Remove the width in px on "Learning". Instead, add width: fit-content, which makes it take up the width of its content. I would also increase the horizontal padding, and increase the font size.

• Remove the height on the card. You should never limit the height of elements containing text - if you added some more text, the content wouldn't fit inside the card, and thus overflow. Let the content (along with padding and margin) decide the height!

• The card looks a bit narrow, so I would increase its max-width to around 20rem.

• Remove text-align: left as that is the default value.

• 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.

Good work star chris.instead of using h4 you can just use p