Sure! Here's the entire README content written in plain text format (you can copy and paste this directly into your README.md file):
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.
-
Overview
- The Challenge
- Screenshot
- Links
-
My Process
- Built With
- What I Learned
- Continued Development
- Useful Resources
-
Author
-
Acknowledgments
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
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
- Solution URL: https://www.frontendmentor.io/solutions/your-solution-url
- Live Site URL: https://your-live-site-url.com
- Semantic HTML5
- CSS custom properties (variables)
- Flexbox
- CSS Grid
- Mobile-first workflow
remunits for responsive and scalable sizing
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 */
}
Going forward, I plan to:
- Practice more advanced layout techniques using
minmax(),auto-fit, andclamp() - Experiment with component-based styling tools like Sass or Styled Components
- Improve visual accuracy when replicating UI from designs
- Frontend Mentor Help Center – https://www.frontendmentor.io/resources
- CSS Grid Guide (CSS-Tricks) – https://css-tricks.com/snippets/css/complete-guide-grid/
- MDN Web Docs on Responsive Design – https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
- Frontend Mentor: @yourusername
- GitHub: https://github.com/yourusername
- Twitter: @yourusername
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.