Testimonials grid section solution Using Grid

Hey @husamasaad, some suggestions to improve you code:

Kevin Powell is the best! I learn a lot new thing from his channel.

• Not sure if it is my browser, but as the screen shrinks your component stretches out vertically to the ends of my screen and gets stuck until the media query starts or I refresh the browser.

• Add a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

• I would not wrap these component in articles elements, as mentioned above/below. These components are not able to stand and do make sense on their own (which is a requirement for using the article element).

Instead, you want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

Code:

<figure>
   <figcaption></figcaption>
   <blockquote></blockquote>
</figure>

More Info:

ARTICLE

Happy Coding! 👻🎃

👾Hello @husamasaad, congratulations on your new solution!

I’ve some suggestions for you:

Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

✌️ I hope this helps you and happy coding!