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

Responsive Blog Preview Card Solution using CSS Flexbox & BEM

@ahmedsomaa

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?

I am proud of trying out @property, @media for a responsive screen and developing for mobile-first.

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

Making the website responsive, need to do more practice on this topic.

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

Responsive web-site design.

Community feedback

@joaotfrodrigues

Posted

Hi @ahmedsomaa,

I'm really impressed with how you've applied BEM methodology to your class naming. It's clean and organized, making the code very readable and maintainable.

However, I noticed a couple of areas where some adjustments could be beneficial:

  • The line-height of your text blocks seems a bit tight, which makes the lines appear crowded. Consider increasing it slightly to improve readability.
  • Also, the shadow size seems a little big, and does not have the transition. which can be with hover.

In terms of your code structure, it would be great to start incorporating more semantic HTML elements. Instead of relying heavily on div elements, try using header, footer, section, article, etc... This will not only improve accessibility but also help in better understanding the content structure.

Additionally, consider optimizing your CSS file by minifying it before import. This will improve loading times and overall performance.

Lastly, having a reset.css file included can significantly ease cross-browser inconsistencies. It's a good practice to include one in your projects.

Overall, great job on your project! These adjustments will further enhance the quality and maintainability of your codebase.

Best regards, João Rodrigues

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