Blog Preview Card

Hi, @dbachour86

I checked out your solution and I have some thoughts:

HTML:

• I see you're already using some semantic HTML tags, which is great! To enhance this further, consider replacing additional divs with other relevant semantic tags (it improves accessibility and SEO).
• There's no need to wrap your h1 and p tags within divs, as they're already block-level elements, similar to div.
• It looks like "Learning" is being used as a button, but it doesn’t seem like something users would click. A span may be more appropriate. Also, since you’re using type="submit" on the button, keep in mind this attribute should only be used within a form, as type="submit" is specifically meant to trigger form submission. Outside of forms, type="button" is the better choice.
• "Published 21 Dec 2023" may not be ideal as a p tag. It functions more like a label for the heading (in this case, the h1). You might want to explore how label and heading elements (h1, h2, etc.) interact. Additionally, wrapping the date in a time tag would make it more semantically accurate.

CSS:

• I noticed these styles on .blog-review:

.blog-review {
  // These attributes make .blog-review appeared in the center
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* The following can be removed as child elements are block-level by default */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

• It looks like you’re using a media query targeting widths of 480px or smaller, which aligns with a desktop-first approach. You may want to explore a mobile-first approach instead.
• Media queries aren’t the only option for responsive design; try experimenting with CSS relative units (em, rem, %, etc.), built-in functions (e.g., calc(), min(), max(), etc.), and relative attributes (min-height, max-width, etc.)

Hope this helps!