My Solution to the Testimonal Grid Section

My goals for this project

• Learn CSS grid
• Gain a better understanding of creating layouts
• Have fun and improve my skill set ---------------------------------------------------------------------------------

Challenges / Road Blocks

It took me about 5 days (short 1-3 hour sessions + a lot of googling and reading up on CSS grid and its capabilities and syntax etc.) to complete this challenge and the biggest road block was creating the layout, At first I thought i could make it just by using flex box alone, and to a degree i was right, the only thing is i felt like i was cheating myself out of learning grid and the work around i had to implement to make flex box work was just unnecessary and complicated my code, so half way through i scrapped my design and began implementing Grid, the biggest challenges i faced when doing so was the following:

• getting the layout to sit properly and have each review box be the appropriate size
• setting proper spacing between each box (learning about gap)
• making everything stay within my review divs and preventing overflow

I overcame all these challenges by not giving up and by researching and testing out all sorts of possible solutions by trial and error.

My message to the community

Please pick apart my code and tear it down piece by piece! i really would appreciate all feedback on how to improve my end product. If you have resources that you would like to share to help me understand concepts then please do send them my way!

Final Thoughts

This project was really fun for me to do, It was my first time ever using CSS grid and my first real project that I assigned myself to completing from start to finish. I learned a lot of things but ultimately i feel that i failed to create an exact replica of the design provided, but I'm still very proud with how close my end product is and i look forward to learning more about CSS and eventually JS to create amazing pages.

P.S

the preview screenshot uses a very narrow aspect ratio that occurs right before my media query (That's what i get for only designing my solution in mind for 1440p and 1080p screens + smartphones.) so please check out my live site for a more accurate representation!