Blog Preview Card - pure HTML & CSS

Community feedback

• 

  P

  Steven Stroud•11,890

  @Stroudy

  Posted 9 months ago

  Hello again, Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

  • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.

          <div class="category">Learning</div>
          <div class="published">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.

  • Your width here should be max-width and in rem also,

  width: 384px;
  

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  @media screen and (max-width: 450px) 
  

  You’re doing so well, and I hope this feedback is helpful! Keep honing your skills and remember to enjoy the process—you’re on a great path. Stay motivated, and happy coding! 🎯

  10