Responsive card using flexbox

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your Frontend Mentor project! Here are a few best practices to consider:

  1. Accessibility and Semantic HTML:

     • Enhance accessibility by providing meaningful alternative text for your images. For instance, in the <img> tags within .card__image and .card__avatar, add descriptive alt texts. This is crucial for screen reader users and SEO. Here's a resource to learn more about accessible images.

  2. Responsive Design:

     • Great job on implementing a media query for smaller screens! Consider adding more breakpoints to ensure your design remains consistent across various device sizes. Explore using relative units like em or rem instead of px for font sizes, margins, and paddings to enhance scalability and responsiveness. Check out this guide on responsive design.

  3. CSS Optimization:

     • Refactor your CSS to avoid repetition. For example, the transition properties in .card__heading can be shortened to transition: all 0.3s;. Also, consider organizing your CSS properties alphabetically within selectors for better readability. Here's a helpful article on CSS organization best practices.

  Keep up the excellent work! Each project is a step forward in your development journey. Remember, coding is about continuous improvement and learning. Your progress is impressive, and I'm excited to see what you'll create next! 🌟💻👍

  00

  Marked as helpful