blog preview card with css and html

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 11 months ago

  Hi,

  Well done on remembering to include the link in this, so many people forget that!

  Here are a few suggestions from your code:

  • Really the link should be inside the heading, not the other way around.
  • This would never act as a page title once the component is used on a real web page, so it shouldn't have a h1. Use a lower importance heading level like h2.
  • According to the design, the whole card should be clickable. One way to do that easily is by making the card position relative, then adding a pseudo-element to the link (e.g. :after) and setting that to be absolutely positioned and covering the card. Now the link will effectively cover the whole card.
  • On hover of that link (or pseudo or card), the shadow is meant to change a little.
  • The main image is decorative in my opinion. That means it should have an empty alt value (alt="").
  • Do you need a div for the card body? That's not really adding anything.
  • Alt text shouldn't include words like "image". If you consider it meaningful it should describe what the image looks like, or if decorative the alt should be blank.
  • As a general rule, don't put text in divs or spans alone, as they are meaningless elements only intended to be used for layout purposes. I'd make that learning category into a paragraph.
  • The card doesn't need a min-height.

  15
• 

  tomblack9452•60

  @tomblack9452

  Posted 12 months ago

  This design is basically exact to the original design. The weight of the text on the main heading is slightly lighter - maybe not the same number specified on the style spec? Other than that, perfect.

  11
• 

  P

  MikDra1•7,470

  @MikDra1

  Posted 12 months ago

  Responsiveness Improvements:

  • Use Media Queries: Implement media queries in style.css to ensure the card layout adapts well to different screen sizes.
  • Flexbox/Grid Layout: Consider using Flexbox or CSS Grid for more flexible and responsive design.

  Code Quality Enhancements:

  • Semantic HTML: Ensure proper use of HTML5 semantic elements like <article> or <section> for better accessibility.
  • CSS Optimization: Minimize CSS by combining similar styles and removing unused code.
  • **Consistency: **Maintain consistent indentation and naming conventions across the project.

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  01