Skip to content
Submitted 3 months ago

Blog preview card using Flexbox

Raul Galicia•70
@raulgaliciab
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 are you most proud of, and what would you do differently next time?

Proud of the (almost) pixel-perfect implementation, the BEM classes and the use of Flexbox.

What challenges did you encounter, and how did you overcome them?

I still struggled with how to justify and align the elements—especially the text. It was basically trial and error until I found the correct way. In some cases the problem was the display.

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

Should I need to use media queries for the responsive design?

Community feedback

  • Vasu Vallabh•190
    @coding-vasuPosted 3 months ago

    Overall Looks Good !

    Feedback on Your Solution

    Accessibility

    • The alt tag is blank for the "Card-autho" image. Always include descriptive alt text for images to improve accessibility.

    Font Size

    • You've set the base font size to 62.5%, which results in a 10px base font size.
    • While this works for this project, it may cause issues when:
      1. Integrating design system libraries
      2. Following general web standards (16px is typically used as the base font size)

    Interactive States

    The following interactive states are missing from your solution:

    • Tab index
    • Focus state
    • Hover state
    • Active state

    Consider adding these to improve user interaction and accessibility.

    Responsiveness

    • The challenge specifies that font sizes should be slightly smaller on smaller screens.
    • To achieve this, you can simply update the base font size to a smaller value for mobile breakpoints.
    • Your current solution doesn't adapt the font size for smaller screens, affecting its responsiveness.

    Tip

    Use media queries to adjust the base font size for different screen sizes. This will help make your design more responsive without needing to change individual element sizes.

    Marked as helpful
    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