Blog Preview Card using HTML and CSS

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezR

  Posted over 1 year ago

  Hello there @PriyankaRC16 👋. Good job on completing the challenge!

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

  General Structure and HTML:

  • Wrap the primary content within the <main> tag instead of using it as a standalone component like a <div>.
  • All the content should be contained within landmarks. Every page minimally needs a <main> element.
  • Consider using <span> or <time> instead of paragraphs for elements that are not actual paragraphs like "Learning" and "Published...".

  CSS and Styling:

  • Instead of fixed widths, employ max-width and min-width for flexible and responsive design. Replace the width: 20em from the .card for a max-width: 20em.
  • Let the content decide the height of the elements. Use padding and margins strategically for this purpose.

  Accessibility and Semantic HTML:

  • The icons/illustration images are decorative, so their alt text must be empty: alt="".
  • Profile image could benefit from a more descriptive alt text, like alt="Headshot of Greg Hooper".

  I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!

  Happy coding!

  01

  Marked as helpful
• 

  Marcos Travaglini•6,210

  @Blackpachamame

  Posted over 1 year ago

  Greetings @PriyankaRC16! you have done an incredible job.

  I leave you some comments in case they help you:

  • Reset the margin in the universal selector * with margin: 0. This will eliminate those annoying scrolls
  • Add a gap: 8px to your card-text class to fix the change above
  • You can adjust the width of the avatar image so that it is correct:

  .avatar-and-text > img {
      width: 35px;
      height: auto;
  }
  

  01

  Marked as helpful