Solution 3-column preview card component

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 9 months ago

  Congratulations on completing the "3-column Preview Card Component" project! 🎉 Your implementation showcases a solid understanding of responsive design and CSS styling. Here are some best practices and recommendations for further enhancements:

  HTML Best Practices:

  • Semantic Markup: Great use of <div> elements. Consider incorporating more semantic HTML elements like <section>, <article>, or <footer> for better structure and accessibility.
  • Alt Text for Images: Ensure that the alt attribute for images is descriptive to improve accessibility. For example, alt="Sedan car icon" is more descriptive than an empty alt="".

  CSS Best Practices:

  • Responsive Design: Your usage of media queries demonstrates a good grasp of responsive design. Always test on various devices to ensure the best user experience.
  • DRY Principle: Aim to keep your CSS dry ("Don't Repeat Yourself"). For example, .btn:hover styles are repeated for each item. You can consolidate them to reduce redundancy.
  • Hover Effects: The hover effects on buttons are well-implemented. Ensure that these effects are also accessible to keyboard users, perhaps through focus states.

  Accessibility Considerations:

  • Keyboard Navigation: Make sure all interactive elements like buttons are accessible via keyboard navigation.
  • Contrast Ratios: Check the contrast ratios of your text colors against their background colors for readability, especially for text over gradients.

  General Suggestions:

  • Code Formatting: Consistent formatting in your HTML and CSS makes your code more readable. Consider using tools like Prettier for code formatting.
  • Cross-browser Testing: Test your site across different browsers to ensure consistent behavior and appearance.

  Keep Exploring:

  • Your journey in front-end development is full of learning opportunities. Continue experimenting with different layouts and CSS frameworks.
  • Consider exploring CSS preprocessors like SASS for more advanced styling capabilities.

  Useful Resources:

  • MDN Web Docs for in-depth learning of HTML, CSS, and JavaScript.
  • CSS Tricks for CSS tips and tricks.
  • A List Apart for comprehensive articles on web design and development.

  Keep up the great work, and I'm excited to see your future projects! 👍

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•600

  @xStephxPosted 9 months ago

  @petritnuredini thanks for advice! I followed all advices and will apply them in future projects. If you have any other suggestions feel free to text me!

  1
• 

  P

  Justin Connell•720

  @justinconnellPosted 10 months ago

  Hi Steph,

  Great job!

  Just checked out your CSS for this solution, I hope you don't mind me offering a suggestion that will make responsive media queries easier to implement... You can go 'mobile first' and design the mobile layout without a media query then add media queries for each of minimum width breakpoint s you need to support.

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•600

  @xStephxPosted 10 months ago

  Hi Justin,

  Thanks for feedback and offering a suggestion. I will try to practise "moblie first" for responsive media queries for breakpoints in future projects. If you have other suggestions for my projects feel free to text me,

  Greetings Steph

  0
• 

  Mitesh Panchal•750

  @miteshp98Posted 10 months ago

  You have used variables in css that's great. :)

  1

  ---

  

  Stefan Bojkovski•600

  @xStephxPosted 10 months ago

  @miteshp98 thanks! :)

  0