This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: @github
- Live Site URL: @github pages
I started by reviewing the design specification. I then started markup knowing that the mobile and desktop layouts would use the same cards, with different page layouts. From there, I stated the styling with mobile-first workflow and then created two media queries to handle the transition from the mobile to the desktop layouts.
- Semantic HTML5 markup
- Mobile-first workflow
- CSS custom properties
- CSS Grid
- Flexbox
This project was an excellent excercise in CSS grid and I learned how CSS grid made the layout of the individual card and the page significantly easier than traditional CSS. I learned how to use minmax, auto, and 1fr to make the page flow from mobile-first to the desktop.
I am looking forward to the next project to build on the CSS grid experience and to add JavaScript for an additional challenge.
- Kevin Powell - Kevin Powell is an excellent teacher and I relied heavily on the notes that I took from his CSS courses taught on scrimba.com.
- A Complete Guide to Grid - I have found css.tricks.com to be a valuable resourse for grid, flexbox, and all things CSS.
- Frontend Mentor - @davidrhyne
- Twitter - @DavidRhyne16