Testimonials-Grid-Section (React and Tailwind)

Community feedback

• 

  Ehsan Tatasadi•1,800

  @tatasadi

  Posted over 1 year ago

  Hey there,

  First off, great job on completing the Frontend Mentor challenge! It's a significant accomplishment, and your effort is clearly evident. I have a few suggestions that could help enhance your project even further:

  Screenshot in Readme File:

  The screenshot in your readme file is cropped. For future projects, aim to include screenshots that capture the entire view of your page. If your monitor is too small, you can zoom out in your browser to get a more comprehensive view. This helps in providing a better visual representation of your work.

  Main Element Width:

  It's a good practice to set a max-width on your main element. This prevents it from growing excessively wide on very large screens, which can lead to a less desirable user experience.

  Grid Implementation:

  You've done a nice job with CSS grid layout. For your next projects, consider using Tailwind CSS classes exclusively for setting grid properties instead of direct CSS. Tailwind offers a lot of utilities for grid layouts and can help maintain consistency and readability in your code.

  First Card Background Image:

  Your first card should include a background image. This would not only enhance the visual appeal but also align more closely with the design specifications.

  Component Naming and Styling:

  For the following component:

  export default function Grid({ icon, title, text, description, color }) {
    // component code
  }
  

  The name 'Grid' might be a bit misleading since the component represents a testimonial card. A more descriptive name like TestimonialCard would be more appropriate. Also, consider adding a box shadow (e.g., shadow-[40px_60px_50px_-47px_rgba(72,85,106,0.25)]) to match the design more closely.

  Defining Colors in Tailwind Config:

  Don't forget to define your custom colors in the Tailwind CSS configuration for your next projects. This will help in maintaining a consistent color scheme throughout your application and make your code cleaner and more manageable.

  Overall, you're doing an excellent job. Keep up the good work, and I'm looking forward to seeing your future projects!

  00

  Marked as helpful