Skip to content
Submitted over 2 years ago

Testimonials Grid Section

TsuneWeb•260
@TSune-web
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi, community!😄

Here's my solution for the challenge. I'm wondering if I can improve on two points:

  1. Grid Layout 🖼 　　- I was sort of new to CSS grid layout and had to figure out how to implement it while learning the concepts from MDN docs. So, I'm not sure if my implementation is a practical solution.

  2. Positioning Contents ✍️ 　　- For contents in each card, I selected individual blocks, like h1 and p of the testimonial on the right, to put them in position. I'd like to know if there are any better ways or if I can position all of them at once.

Happy coding! ☕️

Community feedback

  • Joanna•370
    @JoannaLapaPosted over 2 years ago

    Hi, TsuneWeb’s!

    My congratulations on finishing the project. It is almost pixel perfect, you take care of all details like box-shadow. I noticed that your project is responsive on all devices also tablet. Your CSS is clean, and well organized with your comments, I really like it.

    Concerning your questions I recommend you the video of Kevin Powell who made this project and published the video focusing on grid conception, you can compare your version and maybe you'll learn something new:

    1. Kevin Powell's solution on GitHub
    2. Kevin Powell's solution with an explanation on youtube
    3. for grid-column and grid-row you can also use shorthand grid-area - more info you can find in this article on mdn.

    I also recommend you this box-shadow generator it was useful for me in this project.

    I hope that you will find my feedback helpful, Happy coding! Joanna

    Marked as helpful
    2
    TsuneWeb•260
    @TSune-webPosted over 2 years ago

    Hi, Joanna! 😄

    I appreciate your sweet comments! I organised my code as clean and concise as I could. But then, I watched Kevin Powell's video, which you recommended, and learnt there is still room to improve🤔 The box-shadow generator is also helpful! With it, it'd be easier to implement different styles of bod-shadow.

    Thank you so much🙏

    Happy coding! 👨‍💻

    0

Please log in to post a comment

Log in with GitHub

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