Blog Preview Card

Community feedback

• 

  Huy Phan•2,380

  @huyphan2210Posted 30 days ago

  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!

  Marked as helpful

  0