html css

Community feedback

• 

  P

  Øystein Håberg•10,550

  @Islandstone89Posted 2 months ago

  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.

  Marked as helpful

  1

  ---

  

  star-chris•80

  @star-chrisPosted about 2 months ago

  Thank you@Islandstone89

  1
• 

  Alief Ardiansyah•40

  @aliefardiansyahPosted 2 months ago

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

  Marked as helpful

  0