3 Column Preview Card Component [Plain HTML and CSS, Grid]

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing your "3-column preview card component" project! It's fantastic to see your dedication and hard work come to fruition. Here are some best practices and recommendations to enhance your future projects:

  1. HTML Structure and Semantics:

     • Semantic HTML: Great use of semantic elements like <main> and <div>. Consider adding more semantic tags like <section> for each column for better structure and accessibility.
     • Hidden H1 Tag: The use of style="display: none;" for the <h1> tag is not ideal for SEO. Use off-screen CSS techniques to hide it while keeping it accessible to screen readers.
     • Button Closing Tag: Ensure to properly close the <button> tags (</button> instead of </butto>).

  2. CSS Styling:

     • CSS Variables: Excellent use of CSS variables for a consistent color scheme.
     • Responsive Design: Good implementation of media queries. Ensure to test across various screen sizes for optimal responsiveness.
     • Hover and Active States: Nice touch on the button states. Ensure the color contrast is sufficient for readability.

  3. Code Organization and Readability:

     • Consistency in Styling: Keep consistent indentation and spacing throughout your CSS for better readability.
     • Comments: Adding comments to your CSS will help others understand your styling choices.

  4. Accessibility:

     • Color Contrast: Check the color contrast, especially text on colored backgrounds, to ensure readability for all users.
     • Alt Text for Images: Good use of alt attributes. Always ensure they are descriptive.

  5. Performance Optimization:

     • Optimize Images: Ensure images are optimized for faster load times.
     • Minification: Consider minifying your HTML and CSS for production to improve page load speeds.

  6. Cross-Browser Compatibility:

     • Testing: Test your component across different browsers to ensure consistent performance and appearance.

  7. Further Learning Resources:

     • HTML and CSS Best Practices: MDN Web Docs
     • Responsive Design: A List Apart
     • Accessibility Guidelines: Web Content Accessibility Guidelines (WCAG)

  Keep up the fantastic work! Every project is a step in your journey of growth and learning in web development. Stay curious, experiment, and never stop learning. Your progress is impressive, and the future holds exciting opportunities for you!

  Marked as helpful

  1