Responsive Blog Preview Card Using HTML & CSS

Community feedback

• 

  Harsh Kumar•4,570

  @thisisharsh7

  Posted about 2 months ago

  Great job on completing the challenge! 🎉 Here's some detailed feedback on your solution:

  1. Semantics: Using the <footer> tag for .user-info is a valid choice semantically, as it contains author information. However, since it's inside the main card component and not at the page level, wrapping it in a <div> or <section> with a descriptive class (like .author-info) would be more conventional.

  2. Responsiveness: Consider adding width: 100% to .svg-art:

  .svg-art {
    width: 100%;
  }
  

  3. Great use of grid with place-items: center on .container. It's a clean and effective centering technique.

  4. The font setup and spacing look consistent and readable. Well done keeping visual hierarchy with font weights and sizes.

  5.You might prefer a <div> instead of <footer> inside a card:

  • The <footer> tag usually represents the end of a section or page, so using it inside a card can confuse assistive technologies (like screen readers), especially if you already have a page-level <footer> (which you do).
  • If you reserve <footer> only for page-level elements, your code becomes more predictable and easier for others to read.

  Overall, your structure is clean, modular, and semantic. Keep up the solid work!

  11

  Marked as helpful
• 

  Leyanis Díaz•220

  @LeyaDiaz

  Posted about 2 months ago

  Hi, I'm not an expert, but from what I've studied, it is recommended just like you did, and I did the same. Haha, it's like the structure of a page with its header, nav, sections, and so on. I hope I helped you. :)

  11