Testimonial Grid Challange

This is a solution to the Testimonials grid section challenge on Frontend Mentor.

Topics:

• Testimonial Grid Challange
  • Topics:
  • About:
  • Why did I do this project?
  • How did I do this project?
  • What did I find hard in this project?
  • Who should do this project?
  • Some tips from myside:
  • You are welcomed for any Feedback / suggestions:

About:

• This is a fully responsive project of testimonial grid.
• It is made using HTML and CSS.
• You can see the challange by clicking the link above.
• Here are the screenshots of my solution:
  1. Mobile Version:
  2. Tablet Version(Medium-size devices):
  3. Desktop version(large screen sizes):

Why did I do this project?

• Because I wanted to practice my Grid skills.
• I mean, I know grid properties like grid-template-columns and grid-template-areas, but In order utilize all this properties, you have to practice it in real-life cases.
• And, I wamted to practice responsive design. this project gave me chance to practice @media queries.(although, I don't know much about media queries still haha😅 ).
• I am also getting better at writing clean and commented code by doing projects.

How did I do this project?

• I've done most of the project by myself, but for the grid layout part(Laying out testimonial cards as per the design), I took help from this video(It has some useful tips for using grids).
• Also, If you need some insipiration to write neat code and for utility classes ,you can check out this repo (based on the video).

What did I find hard in this project?

• I won't say hard, but I kinda find it tricky to specify breakpoints (min-width in this case), so that it look optimal on all screen sizes.

Who should do this project?

• people, who wanna practice their grid/flexbox and responsive design skills, i.e. @media queries, not setting fixed height/width on elements, using rem/em/% units instead of px.

Some tips from myside:

• Use grid for the macro-layout of the page(i.e. displaying tesimonial cards/boxes on page as shown in the design).

Note: you can use flexbox for this, if you find it easy.

• Write CSS for mobile-layout first and then add @media queries to make it desktop-friendly OR tablat-friendly.

• I know, I have given this tip in my other projects also, but I find it very helpful. Use flexbox/grid with gap property for inner-spacing instead of margin and padding(e.g spacing between content inside testimonial boxes/cards).

  Note:Also, browser supp. for gap is very good.

• Use utility classes for styles that are specific to one or more boxes.

You are welcomed for any Feedback / suggestions:

• If you have any feedback, you can tell me at "[email protected]".
• I have some doubt about font-size. Does font look smaller on mobiles? I kinda find it small.Should I change the font-size?

🙏 THANKS 🙏