Skip to content
Submitted 6 months ago

testimonials grid section

Louise•130
@atheenaoteyza
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?

able to try mobile first approach then failed but somehow managed to fix, I don't think mobile first is the right approach, or I should've not use flex first// next time I would not do a mobile first for this type of project

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

transforming flex into grid upon media queries, I'm not sure if I did it correctly because I feel like there are other better ways which has less code

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

I would like to know better ways to approach this project, should I use grid on all medias or is what I did just right which is using flex on this particular project for mobile view then grid on larger screen

Community feedback

  • Bernardo Poggioni•5,360
    @R3ygoskiPosted 6 months ago

    Hello again Louise, congratulations on completing your project, it looks very similar to the proposed design, well done.

    Regarding your question, yes, the way you did it is correct. If you had chosen to use grid for mobile as well, it would have worked. Using flex ends up being simpler than using grid, so I believe the best approach for mobile is indeed to use flex, as you did.

    A tip regarding CSS: to avoid having a CSS file with too much content, try breaking it into other files, creating a reset.css, responsive.css, and linking them in the HTML through <link> (similar to how it is done to link style.css). This way, you bring extra organization to the project.

    And about the HTML, I noticed you used several <h1> tags, the correct way is to have only one <h1> tag per page. The best practice would be to use <h2> and <h3> for the testimonials, and if you want to include an <h1>, you can place it outside the cards and use display: none; to make it disappear (note that this will still allow it to be read by screen readers).

    Once again, congratulations on completing your project, it turned out really well. If anything I said caused any doubt, please ask below and I will try to help as best as I can.

    Marked as helpful
    1
    Louise•130
    @atheenaoteyzaPosted 6 months ago

    @R3ygoski thanks so much I didn't know that about h1, and you're right it is more organize if I will put other things on diff css file, will apply this tip on my next projects. thanks again! :-)

    1

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