Skip to content
Submitted about 2 months ago

Testimonials Section

sttilstra•130
@sttilstra
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Actually getting the layout to be correct was challenging. I have not used grid before and it was a whole new thing.

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

Using grid in general. It took quite a few videos and assistant help to get things working. I have a better understanding of it, but still need to learn much more and be more comfortable with it.

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

Asking for help with the quotation mark image in the purple container. I could not get that looking right and excluded it on purpose. Any input on that would be appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•5,360
    @thisisharsh7

    Great job tackling CSS Grid for the first time and achieving a correct layout! Your layout looks clean.

    Suggestions:

    • Quotation Mark Image: To position the quotation mark in the .daniel testimonial, use a pseudo-element (::before) with background-image: url('./images/bg-pattern-quotation.svg'). Set position: absolute, top: 0, right: 10%, and adjust background-size and z-index to place it behind the text. Example: .daniel::before { content: ''; position: absolute; top: 0; right: 10%; ... }.
    • Grid Mastery: Simplify Grid layouts by using grid-template-areas for clearer structure. For .main_container, define named areas for each testimonial to make positioning intuitive.
    • Responsive Design: Enhance mobile responsiveness by adding intermediate breakpoints (e.g., 768px) to handle tablets. Use minmax() for flexible column widths.
    • Code Optimization: Group common styles (e.g., .testimonial padding, border-radius) to reduce repetition.

    Keep practicing Grid, and consider experimenting with Tailwind CSS for faster styling. Excellent work overall!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord