Blog card component with vanilla html/css

Community feedback

• 

  

  Gwenaël Magnenat•1,540

  @gmagnenat

  Posted 4 months ago

  Hi,

  Great job on your work so far! It looks pretty good.

  Here are a few things I noticed.

  1. Use rem for min-width instead of pixels. Pixels are fixed units and don’t respect user preferences when they increase their browser’s default font size. Using rem ensures better accessibility. More on this here: Why you shouldn't use pixels for font-size.

  2. Heading structure: You correctly placed the <h1> first, which is great. However, since this is a blog preview card component that will appear in a grid with others, the title should likely be a lower heading level (e.g., <h2> or <h3>). If you still want an <h1>, consider making it visually hidden for screen reader users.

  3. The blog title needs to be a link. Since this is a preview, the heading should be wrapped in an <a> tag leading to the full blog post:

     <h3><a href="full-post-url">Blog Title</a></h3>
     

     This improves navigation and usability.

  4. Alt text improvement: Avoid using words like "image" or "picture" in alt attributes, as screen readers already announce them as images. If the image is purely decorative, leave alt="" so it is skipped. Learn more here: How to write good alt text.

  5. Missing a modern CSS reset. Adding a reset at the start of your stylesheet improves consistency across browsers. Check out:

     • Andy Bell’s Modern CSS Reset
     • Josh Comeau’s Custom CSS Reset

  6. An active/hover state is missing. Adding styles for :hover, :focus, and :active states improves interactivity. To go further, you can make the whole card focusable and clickable by expanding the clickable area of the link using a pseudo-element. Here’s an example:

     .card a::after {
       content: "";
       position: absolute;
       inset: 0;
     }
     

     This is a great trick to learn for improving usability.

  I can see that you already got some experience but I hope you find something useful in here to help you refactor your solution.

  Have fun !

  00
• 

  AmIKamil•140

  @AmIKamil

  Posted 4 months ago

  Used border radius is bit different and space between author pic and name differs on first sight, but overall: very good job I am impressed with your code, it is very clean - i mean totally readable Comments are useful Very good step with declaring roots

  I know that it was quite easy challenge, but I wish to write as good code as yours

  (I've stalked you, looks like You're a pro :o followed :) hope to code something with you when I'll be ready ~AmIKamil)

  00