Skip to content
Submitted 25 days ago

Blog-Preview-Card

Jaykins1•60
@Jaykins1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

All feedback are welcome.

Community feedback

  • P
    Kamran Kiani•2,700
    @kaamiikPosted 24 days ago

    HTML Structure

    • A proper page structure inside <body> should look like this:
    <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

    Since this is a card component, we only need the <main> element.

    Images

    • For decorative and avatar images, use empty alt text: alt=""
    • Avoid using words like image, picture, or photo in alt descriptions

    Text Elements and Semantics

    • The "Learning" text should not be a <button> - it should be a <p> tag since it has no interactive behavior
    • If it needs to be clickable/navigational, use an <a> tag instead
    • The <h6> text is incorrectly used - this should be a <p> tag
    • The person name should also be a <p> tag

    Interactive Elements

    • Elements with hover effects are considered interactive
    • If an element with hover effects navigates to a new page, wrap it in an <a> tag
    • If it triggers an action, wrap it in a <button> tag

    Heading Hierarchy

    • Do not skip heading levels (e.g. from <h1> to <h6>)
    • Headings should follow a logical order: <h1> → <h2> → <h3>
    • Use CSS to adjust visual appearance if needed

    CSS Best Practices

    • Start with a proper CSS reset (Andy Bell or Josh Comeau resets are recommended)
    • Avoid fixed widths:
      • Remove width: 350px from .box
      • Use max-width for better text container adaptability
      • Remove unnecessary width: 20% and use padding instead
    • Use relative units:
      • rem for font-size and max-width instead of px
      • Learn more about this here

    Responsive Design

    • Follow mobile-first approach:
      • Start with mobile styles as the default
      • Use min-width in media queries
      • Use em units for breakpoints

    Example media query:

    @media (min-width: 40em) {
  /* Desktop styles */
}
    0
  • GCrane93•70
    @GCrane93Posted 25 days ago

    Good attempt, design-wise you're almost there on the first pass. It just needs a little tweaking to match.

    Suggestions

    • Use and reference the figma/design file. Has values for everything you're designing (widths, font sizes, border-radius etc.)
    • Add the Google font
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord