Blog Preview Card

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,120

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Enthroned07•40

  @Enthroned07Posted 11 months ago

  Thank you very much for your suggestion, i'll make improvement. @MelvinAguilar

  0
• 

  Daniel 🛸•44,370

  @danielmrz-devPosted 11 months ago

  Hello @Enthroned07!

  Your project looks great!

  I noticed that you used margin to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

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

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Enthroned07•40

  @Enthroned07Posted 11 months ago

  Thanks so much for the advice, i'll definitely put it to use next time. @danielmrz-dev

  0