Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card using Flexbox

@raulgaliciab

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P

@coding-vasu

Posted

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.
  • 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)

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.

  • 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.

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
Discord logo

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