Solution Four card feature section

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing the Four Card Feature Section project! 🎉 Your commitment to learning and improving your web development skills is commendable. Here are some best practices and recommendations to further enhance your project:

  HTML Best Practices:

  • Semantic HTML: Good job structuring your HTML. Consider using more semantic tags like <section> for each card. This improves readability and accessibility.
  • Alt Text for Images: Ensure that all images have descriptive alt attributes. This is important for accessibility and SEO.
  • Heading Structure: Maintain a logical order in your headings. Use <h1> for the main title, followed by <h2>, <h3>, etc., for subheadings.

  CSS Best Practices:

  • Responsive Design: Your use of media queries shows a good understanding of responsive design. Keep testing on various devices to ensure consistency.
  • CSS Variables: Great use of CSS variables for colors and fonts. This makes future changes and maintenance easier.
  • Selector Specificity: Be cautious of using overly specific selectors that might make your CSS hard to override later.

  General Recommendations:

  • Accessibility: Ensure your website is accessible by following WCAG guidelines. Tools like WAVE can help analyze your site for accessibility issues.
  • Performance: Optimize images and minify CSS for better performance. Tools like TinyPNG for images and CSS Minifier can be useful.
  • Cross-Browser Testing: Test your site across different browsers to ensure compatibility and a consistent user experience.

  You're doing a fantastic job, and each project is a stepping stone towards mastering web development. Keep exploring, learning, and building! 💪

  For more information and best practices, you can refer to:

  • MDN Web Docs for comprehensive guides on HTML and CSS.
  • W3Schools for tutorials and examples.
  • WebAIM for understanding web accessibility.

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 10 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!

  0
• 

  Cyuzuzo Bienvenu•220

  @bienvenudevPosted 10 months ago

  Hello!

  Unfortunately, this solution is not responsive on tablet screens (770px - 1020px), and I'd recommend using grid on this layout to have a little practice with it.

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 10 months ago

  @jwben1 thanks for feedback! I will fix responsive for tablet screens. Thanks for advice, if you have some other suggestions feel free to text me.

  0
• 

  Kush•50

  @kushk4856Posted 11 months ago

  Hey 👋 you built an awesome layout but I think It's good if you use 'rem' instead of 'px'

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @kushk4856 thanks for feedback! I will try to use 'rem' instead of 'px' in future projects. If you have some other suggestions feel free to text me.

  0