Responsive Testimonials Grid

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @MathiasHun1 👋,

  Great work on your project so far! 🎉 Here are a couple of suggestions to make it even better:

  Feedback 📝

  1. Tablet Screen Optimization:
     The project looks fantastic overall, but the tablet screen size could use some fine-tuning. Ensuring a more seamless experience on medium-sized screens will elevate the user experience.

  2. Optimizing React Code with map:
     Instead of hardcoding each Card component, you could dynamically render them using the map method. This will make your code more concise, maintainable, and scalable.
     🛠️ Example:

     const cardData = [
       {
         className: 'card1',
         backgroundColor: COLORS.violetModerate,
         profileNameColor: COLORS.white,
         profileTitleColor: COLORS.white,
         cardTitleColor: COLORS.white,
         cardQuoteColor: COLORS.grayLight,
         image: profile1Svg,
         extraImage: svgQuote,
         name: 'Daniel Clifford',
         titleText: 'I received a job offer mid-course...',
         quoteText: '“ I was an EMT for many years before I joined... ”',
       },
       // Add other cards similarly...
     ];
     
     return (
       <div className="wrapper-app">
         {cardData.map((card, index) => (
           <Card key={index} {...card} />
         ))}
       </div>
     );
     

     This reduces repetition and makes your code easier to extend in the future. 💡

  Final Note 🌟

  Your project has a solid foundation, and with these improvements, it can shine even more! 🚀 Feel free to reach out if you need further help with implementation. Keep up the great work! 💪

  Best regards,
  Aakash

  Marked as helpful

  0

  ---

  

  P

  MathiasHun1•410

  @MathiasHun1Posted 2 months ago

  @skyv26 Thanks for your advices!

  1. I have to admit, I was a bit lazy when it came to working on the tablet design for this project. :)

  2. That’s a great point. Even though we’re not fetching data from a server here and rendering things dynamically based on that, it’s better practice to write the code as if we were. I’ll make sure to apply this approach in my future projects.

  Cheers, Mathias

  0
• 

  Marzia Jalili•3,970

  @MarziaJaliliPosted 2 months ago

  Congratulations on finishing the project!

  Some suggestion:

  • Using the grid-template-areas can be a very concise approach, man.

  • In order for this property to work, you are required to set the grid-area in each testimonial element.

  Take the code below as an example for html:

  <ul class="testimonial-parent">
    <li class="testimonial">(the details of the Denail)</li>
    <li class="testimonial">(the details of the Janathan)</li>
    <li class="testimonial">(the details of the Jeanette)</li>
    <li class="testimonial">(the details of the Pattric)</li>
    <li class="testimonial">(the details of the Kira)</li>
  </ul>
  

  Then, apply the code below in css:

  
  /* give each child element a name for grid-area */
  
  .testimonial:nth-child(1) {
    grid-area: one;
  }
  
  .testimonial:nth-child(2) {
    grid-area: two;
  }
  
  .testimonial:nth-child(3) {
    grid-area: three;
  }
  
  .testimonial:nth-child(4) {
    grid-area: four;
  }
  
  .testimonial:nth-child(5) {
    grid-area: five;
  }
  
  /* set the grid-template-areas on the parent element*/
  
  /* for mobile */
  
  .testimonial-parent {
     display: grid;
     gap: 1rem;
     grid-template-areas: 
      "one"
      "two"
      "three"
      "four"
      "five"
     ;
  }
  
  /* for tablate */
  
  @media (min-width: 30em) {
    .testimonial-parent {
       grid-template-areas: 
         "one one"
         "two three"
         "four four"
         "five five"
       ;
    }
  }
  
  /* for desktop */
  
  @media (min-width: 60em) {
    .testimonial-parent {
      grid-template-areas: 
        "one one two five"
        "three four four five"
      ;
    }
  }
  

  Your solution is flawless though!

  I hope I convied my idea properly😁😁

  Marked as helpful

  0

  ---

  

  P

  MathiasHun1•410

  @MathiasHun1Posted 2 months ago

  @MarziaJalili

  "I hope I convied my idea properly" - Absolutely :D

  I never tried grid-areas in practice but your solution looks very clean, so I will definietly dig into that.

  And I see you are using relative units as breakpoints instead of pixels. It just came to me that this is a better approach, so its very helpful too.

  Thanks for the reflection!

  1