Design comparison
Solution retrospective
I did this the challange with the help of Kevin Powell Tutorial , it was a little hard for me to get it done by my own but he made it super clear and easy for me now... check his video out if you are trying to understand grids better.
Community feedback
- @VCaramesPosted about 2 years ago
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:
Happy Coding! 👻🎃
Marked as helpful0 -
- @correlucasPosted about 2 years ago
👾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!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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