Testimonials Grid Section with CSS Grid

What are you most proud of, and what would you do differently next time?

I am proud to overcome the challenges I initially faced while learning CSS Grid. Despite finding the syntax and logic complex at first, I was able to grasp it through persistent practice and the use of online resources. This experience has boosted my confidence in my ability to tackle new concepts and technologies.

If I were to do anything differently next time, I would probably invest more time early on in understanding the fundamentals of the concept I'm learning. This would likely make the learning process smoother and more effi

What challenges did you encounter, and how did you overcome them?

When I first started learning CSS Grid, I faced numerous challenges. The concept of grid lines, grid tracks, and grid areas was completely new to me, and the complex syntax was initially hard to grasp. This left me feeling confused and frustrated.

To overcome these challenges, I decided to start with the basics. I took the time to learn each CSS Grid property individually, such as grid-template-columns, grid-template-rows, grid-gap, grid-line, grid-area, and others. This approach helped me understand the function of each property and how they interacted with each other to form a complete grid layout.

What specific areas of your project would you like help with?

• Maybe there's a better way of doing the desktop view. If someone can improve the structure below, please let me know.

'''@media (min-width: 80rem)

.grid-container {
  width: 1260px;
  grid-template-columns: 1fr;
  margin: auto;
  margin-top: 250px;

  .daniel {
    width: 540px;
    height: 280px;
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .jonathan {
    width: 255px;
    height: 280px;
    grid-column: 3 / 4;
    grid-row: 1;
  }

  .kira {
    width: 220px;
    height: 650px;
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .jeanette {
    width: 255px;
    height: 280px;
    grid-column: 1;
    grid-row: 2;
  }

  .patrick {
    width: 540px;
    height: 280px;
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .cards:first-child {
    background-position-x: 400px;
    background-size: 125px;
  }
}

'''