Responsive Testimonial Grid + React + Material UI + CSS vanilla

Community feedback

• 

  P

  Daniel 🛸•44,830

  @danielmrz-dev

  Posted over 1 year ago

  Hello @germanp007!

  Your solution looks excelent!

  I have just one suggestion:

  📌 In order to make your HTML code more semantic, avoid using <p> for titles.

  The tag <p> is meant for paragraphs. For titles, we have the HTML headings (the tags <h1> to <h6>).

  Here's a quick guide on how to use them:

  Unlike what most people think, it's not just about the size and weight of the text.

  • The <h1> to <h6> tags are used to define HTML headings.
  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
  • Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

  All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  10

  Marked as helpful
• 

  Petrit Nuredini•2,860

  @petritnuredini

  Posted over 1 year ago

  Congratulations on completing your project! It's a significant achievement, and your commitment to learning and improving is clear in your work. Here are some best practices and recommendations to further enhance your project:

  1. React Component Structure:

     • Props Validation: Consider using PropTypes for better type checking and documentation of your component props.
     • Functional Components: Great use of functional components and React hooks for cleaner and more efficient code.

  2. Styling with Material-UI:

     • Consistent Theming: Good use of Material-UI for consistent theming. Make sure to leverage Material-UI's theming capabilities to the fullest for a more cohesive design.
     • Avoid Inline Styles: While using inline styles can be convenient, it's generally better to separate your styles from your component logic for better maintainability.

  3. Responsive Design:

     • Media Queries: You've done a great job with media queries. Ensure that your application is thoroughly tested across various devices for a consistent user experience.
     • Grid System: Utilizing CSS grid for layout is a modern approach. Make sure the grid items are aligned and spaced consistently.

  4. Code Organization and Readability:

     • Component Separation: Keep your components small and focused. If a component gets too large, consider breaking it down into smaller, reusable components.
     • Descriptive Naming: Ensure your function and variable names are descriptive and clear to understand. This makes your code more readable and maintainable.

  5. Accessibility:

     • Keyboard Accessibility: Ensure that all interactive elements are accessible via keyboard.
     • ARIA Attributes: Use ARIA attributes where necessary to make your components more accessible to users with disabilities.

  6. Performance Optimization:

     • Lazy Loading Images: Implement lazy loading for images to improve page load times, especially for users with slower internet connections.
     • Minification and Bundling: Use tools like Webpack or Babel to bundle and minify your JavaScript files for production.

  7. Further Learning Resources:

     • React and Material-UI: React Documentation and Material-UI Documentation
     • Responsive Design: CSS Tricks Guide
     • Web Accessibility: Web Accessibility Initiative (WAI)

  Keep up the great work and continue to challenge yourself with new projects! Each project is a step forward in your development journey. Stay curious, keep experimenting, and don't be afraid to try new technologies and techniques. Your progress is impressive, and I'm excited to see what you'll create next!

  10

  Marked as helpful