Testimonial section using CSS Grid

Hello there,

Congratulations on successfully completing the challenge, you did great.

I have a recommended approach that might interest you, using the Javascript arrays mapping for generating grid container style.

Basically, arrays are a technique that can simplify the collection of data of similar type. in this challenge each testimonial data contains data with a similar pattern such as testimonial profile image, testimonial name, testimonial status (verified graduate), testimonial description and so on. What differs are the background color, the font colors, and a quote image in the first testimonial. You can add these to the data array. After the data is grouped into an array, then you can pass it as an object into a styled JavaScript mapping component inside each respective grid area.

The code snippet could look like this:

             return(
                 <Testimonialcard
                     key={testimonial.name}
                     $gridarea={testimonial. gridarea}
                     $namecolor={testimonial. namecolor}
                     $statuscolor={testimonial. statuscolor}
                     $maindescolor={testimonial.maindescolor}
                     $subdescolor={testimonial. subdescolor}
                     $bgcolor={testimonial. bgcolor}
                     $bgimage={testimonial. bgimage}
                 >
                         <Profilpicture src={require(`${testimonial.profpic}`)} alt={testimonial.profpic} 
                          />
                         <Quoteimage src={require(`${testimonial.bgimage}`)} alt= 
                         {testimonial.bgimage} />
                          <p>
                                 {testimonial. name}
                          </p>
                          <p>
                                 {testimonial. status}
                          </p>
                          <p>
                                 {testimonial. maindesc}
                     	  </p>
                     	  <p>
                                {testimonial. subdesc}
                     	  </p>
                 </Testimonialcard>

Hope that can be useful. Once again congrats and keep happy coding.

Hello, R. HAYES,

I believe using individual classes for each card/section is a better option in the long run.

You might want to rearrange the cards later on or redesign a specific card, instead of going back to the html and editing the position of each card, you could just target the specific card that needs repositioning and do your magic.