Skip to content
Submitted about 2 months ago

Testimonials Grid Section developed using Css Grid and Flex

tailor-made-god•120
@tailor-made-god
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?

I am proud of develop this design in 4 hours without design files as a beginner. Next time I will try to do a more responsive design like elements are resizing according to the devices in between the mobile and desktop design.

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

The challenge I encountered was deciding the element sizes without design files and I overcome this by some math, trial and error.

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

I want some help in how to resize the elements with device size changes like fluid in between mobile and desktop.

Example : div size fluidly changing while resizing window but same time elements inside div also resizing and align perfectly.

This my expected output as aspiring developer, So if it can happen. How?

Community feedback

  • Sylwia•240
    @LesSylPosted about 2 months ago

    Hi, great solution done, while I have a few comments:

    1. The h1 should only be one per page, here you can read more: MDN.

    2. It is good practice to use a naming convention such as BEM (Block, Element, Modifier) is beneficial as it makes the CSS more organised, readable and easier to maintain. BEM helps to clearly understand the purpose of each class, avoid naming conflicts and create reusable components, leading to a more scalable code base. More details here: BEM.

    3. If you want better responsive, try using rem and em instead of px. More details here: font-size.

    Marked as helpful
    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