Skip to content
Submitted 12 months ago

Blog preview card using Flexbox

bem
P
Raul Galicia•230
@raulgaliciab
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code

Please log in to post a comment

Log in

Community feedback

  • Vasu Vallabh•190
    @coding-vasu

    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

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