Blog Preview Card Component using HTML and CSS

Community feedback

• 

  P

  Steven Stroud•11,890

  @StroudyPosted about 2 months ago

  Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

  • Using a <div> has no semantic meaning, For improved semantic correctness, use a <section>, <h2>, or <p> would be more semantically appropriate, See below,

  <div class="tag">Learning</div>
  <div class="published-date">Published 21 Dec 2023</div>
  

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

  Marked as helpful

  1