Responsive Blog Preview Card with HTML & CSS

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 9 months ago

  Hello @bulhoesgabriel!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  P

  Øystein Håberg•10,410

  @Islandstone89Posted 9 months ago

  HTML:

  • "Learning" is not a heading, but a paragraph. Make it a <p>.

  • Wrap the date in a <time> tag, like this:<time datetime="2023-12-21">21 Dec 2023</time>.

  • Change "HTML & CSS Foundations" to a <h1>.

  • .attribution should be a <footer>, and its text must be wrapped in a <p>.

  CSS:

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

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as the body is 100% wide by default. And add a gap of around 2rem, to create space between the main and the footer.

  • Remove the margin on the card. Instead, add justify-content: center and align-items: center on the body to center the card horizontally and vertically.

  • max-width on the card should be in rem.

  • Remove the height - you never want to set a fixed height on elements containing text, as that causes overflow if the text grows taller than the element.

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

  • On the image, add display: block and max-width: 100% - the max-width prevents it from overflowing its container.

  Marked as helpful

  1
• 

  Roger Holden•10

  @roger06Posted 9 months ago

  Didn't need to add classes to h1 and h2 tags - could have just styled them as they are the only ones.

  1