Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 4 months ago

Blog Preview Card using html, css flexbox

accessibility
Adam Abdallah•20
@AdamAbdallah1
A solution to the Blog preview card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of how clean and visually accurate the design turned out, especially the box shadow, border radius, and overall layout. It helped me solidify my understanding of CSS fundamentals.

Next time, I would improve the responsiveness of the design for different screen sizes and consider using semantic HTML tags more carefully, I'd also explore using CSS variables or a utility framework like Tailwind CSS to speed up styling and keep the code DRY.

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

One of the main challenges was getting the box border and shadow to match the design exactly. It took a few tries to adjust the box-shadow, and padding to make it look right. I overcame this by inspecting similar designs, testing different values, and using browser developer tools to preview changes live.

I also faces some alignment issues with the text and image at first, but reviewing the box model and practicing with margin and flexbox helped me fix those quickly.

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

I'd like help improving the responsiveness of the layout, especially making it look good on smaller screens. I'm also open to feedback on how to write cleaner, more maintainable conventions or structuring the CSS more efficiently. Additionally, suggestions on how to enhance accessibillity and semantic HTML, would be greatly appreciated.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Adam Abdallah's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License