Responsive Blog Preview Card Solution using CSS Flexbox & BEM

Community feedback

• 

  João Rodrigues•70

  @joaotfrodriguesPosted 4 months ago

  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