Social Proof Section Solution [Plain HTML + CSS, Flexbox and Grid]

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  First off, congratulations on completing your project, Faruq! Your HTML and CSS skills are clearly demonstrated in this Social Proof Section. Here are some suggestions to further improve your work:

  1. HTML Structure and Semantics:

     • Use more semantic HTML tags. For instance, replace <div> tags with <article>, <section>, or <aside> where appropriate for better readability and SEO.
     • Avoid using <div> for every element. Use <header>, <footer>, <nav>, etc., where applicable.

  2. CSS Improvements:

     • Consistent Naming Convention: Stick to a consistent naming convention for CSS classes to enhance readability. For example, choose between kebab-case (rating-container) and camelCase (commentContainer) and use it consistently.

  3. Responsive Design:

     • Implement responsive design using media queries to ensure your website looks good on all devices. You've done some of this, but ensure all elements scale well.

  4. Accessibility:

     • Alt Attributes: Good job using alt attributes in images. Make sure they are descriptive.

  5. Performance:

     • Optimize Images: Ensure images are optimized for the web to improve loading times.

  6. Code Organization:

     • Consider separating CSS into different files (modular CSS) for each component for better maintainability.

  7. Further Learning Resources:

     • HTML Semantics: MDN Web Docs
     • CSS Best Practices: CSS Tricks Guide
     • Responsive Web Design: A List Apart

  Keep up the fantastic work! Your dedication is evident, and every project you complete is a step towards mastery. Excited to see your future projects!

  10

  Marked as helpful
• 

  Korney Chervonenko•1,080

  @KorneyChervonenko

  Posted over 1 year ago

  You remembered me about "flex-wrap: wrap". I should use it in next challenge. Thanks

  01