@jasoneczek
Submitted
What are you most proud of, and what would you do differently next time?
For this challenge I took a bit of a different approach than in my previous few solutions by experimenting with utility classes with my custom properties for colors, typography, and basic layout. This allowed me to write Bootstrap-like classes directly into my html. For responsiveness, I used grid-template-areas
to place the testimonial cards on the grid.
What challenges did you encounter, and how did you overcome them?
I did my best to match the design as closely as possible, but I found some challenges when it came to spacing the elements within each testimonial and landing on the same height/width as in the Figma file. Eventually I created little boxes directly in the Figma file itself to measure spacing, e.g. (8x8px, 16x16px, 24x24px) and converted these to rem units in my CSS. I tried a few line heights for the paragraphs as well until I got within a few pixels of the correct heights and widths of the cards for mobile and desktop views without hardcoding them.
What specific areas of your project would you like help with?
I used the and
elements, and I'm wondering if how I used as the wrapper for the entire card is OK, or if the cards also need to be
's in a `` for this challenge.