Skip to content
Submitted 4 months ago

Testimonials-Grid-Section

Ham•340
@hmac100
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

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

Again, like the more recent challenges - just getting through it was good. This time I did a laptop media query - which I suspect I should be doing for all the challenges anyway. Attempted Css Grid for the first time - scary but amazing . I attempted BEM markup - made the css a lot easier and clearer.

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

The challenge was 40% knowing what I'm doing - 40% looking things up and 20% flying blind ( i.e. guess work ! ). I totally wimped out with the mob and laptop layout - I wanted to continue with grid but was having issues trying to resize a specific single grid item to avoid unwanted space. I'm sure they'd be a way of doing it with one line of code but as I don't enough about grid I took the quick and dirty option and reverted back to flex and flex-direction:column.

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

As alluded to in previous question - the Css Grid knowledge is along way from where it needs to be - also I'm sure there's a lot improvements I could make with the bem markup.

Community feedback

  • Krushna Sinnarkar•1,100
    @krushnasinnarkarPosted 4 months ago

    Hi @hmac100,

    Congratulations on successfully completing the challenge!

    Your solution is well-executed, with a good balance of semantic HTML, accessibility, responsiveness, and adherence to design specifications. With continued practice and exploration of advanced CSS techniques, your skills will further improve, enabling you to tackle even more complex challenges in the future.

    Great job on this challenge, and keep up the excellent work!

    I have a suggestion regarding your code that I believe will be of great interest to you.

    • Use semantic tags such as <article> or <section> instead of <div> for each testimonial to better convey the structure and meaning of the content.

    • Add max-width to prevent content from stretching too wide on larger screens.

    I hope you find this helpful, and I would appreciate it greatly if you could mark my comment as helpful if it was.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    0
    Ham•340
    @hmac100Posted 4 months ago

    @krushnasinnarkar Hi Krushna Thanks so much for your time to give me some great advise - it's really appreciated and thanks for the offer to reach out for further assistance - I'm sure to be needing it :)

    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