Skip to content
Submitted over 2 years ago

Testimonial Challenge Using FlexBox

Irtaza Hyder•30
@SyedMIrtazaHyder
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Placing the quotation marks was difficult, as i used the relative absolute feature. I think there is a better way. The quotation (which has the tag '#design' in the CSS file) moves in a weird way but works. Also I used flexbox as I have not done CSS grid yet, so is a solution in Grid more easier and smaller in comparison to my FlexBox solution?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello @SyedMIrtazaHyder, congratulations on completing this challenge!

    Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

    1.You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body.

    2.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.

    3.Prefer CLASS instead of ID to give style to your elements, choosing id is not a good idea because it’s a too specific selector and it's better to use it for forms or Javascript code. It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
  • To Dat•290
    @tltd0807

    hi IRTAZA HYDER’S. First of all, congratulation on your challenge, you did it very nice and i have learned from it a lot And here is my thought: -Grid will be easier for 2 dimensions layout you can watch here -The quotation you can set it as background with the position top left etc... link Also you can check my solution if you want And have a nice day 😁😁

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