Skip to content

Piyush-Rajput7/Testimonial-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sure! Here's the entire README content written in plain text format (you can copy and paste this directly into your README.md file):


Frontend Mentor - Testimonials Grid Section Solution

This is my solution to the Testimonials Grid Section challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7

It's a great challenge for practicing responsive layouts, semantic HTML, and CSS Grid.


Table of Contents

  • Overview

    • The Challenge
    • Screenshot
    • Links
  • My Process

    • Built With
    • What I Learned
    • Continued Development
    • Useful Resources
  • Author

  • Acknowledgments


Overview

The Challenge

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See a responsive testimonial grid layout on desktop and stacked layout on mobile

Screenshot

Add a screenshot of your final solution here. You can use Firefox (right-click → Take Screenshot) or tools like FireShot.

File path example: ./screenshot.png

Links


My Process

Built With

  • Semantic HTML5
  • CSS custom properties (variables)
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • rem units for responsive and scalable sizing

What I Learned

This project helped me strengthen my CSS Grid skills, especially understanding how to position child elements using grid-column and grid-row. I also practiced writing scalable CSS using rem units instead of px, and structuring responsive designs with mobile-first breakpoints.

Example CSS snippet:

.main-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 68.75rem; /* 1100px */
}

Continued Development

Going forward, I plan to:

  • Practice more advanced layout techniques using minmax(), auto-fit, and clamp()
  • Experiment with component-based styling tools like Sass or Styled Components
  • Improve visual accuracy when replicating UI from designs

Useful Resources


Author


Acknowledgments

Thanks to the Frontend Mentor community and all the contributors who inspired and helped others complete this challenge. This project was completed independently as part of my frontend learning journey.


Let me know if you'd like this customized with your actual GitHub/Frontend Mentor username or if you'd like the screenshot image setup too.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published