https://github.com/baguilar6174/testimonial-grid
This is a solution to the Testimonials grid section challenge on Frontend Mentor
https://github.com/baguilar6174/testimonial-grid
bootstrap css frontend-mentor html scss
Last synced: about 2 months ago
JSON representation
This is a solution to the Testimonials grid section challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/baguilar6174/testimonial-grid
- Owner: baguilar6174
- Created: 2021-05-28T03:30:25.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-16T02:11:50.000Z (over 1 year ago)
- Last Synced: 2025-05-19T08:11:26.749Z (about 1 year ago)
- Topics: bootstrap, css, frontend-mentor, html, scss
- Language: HTML
- Homepage:
- Size: 394 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Testimonials grid section
This is a solution to the [Testimonials grid section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7).
## Description
This challenge is a CSS Grid practice. Grid is such a powerful addition to CSS. Bootstrap 5 will be used to customize the site. Your users should be able to:
- View the optimal layout for the site depending on their device's screen size
## Installation
The project has been created using two extensions of visual studio code: [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass "Live Sass Compiler") to compile the SCSS code to CSS and [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer "Live Server") to visualize the changes made in the browser (hot reload).
To properly configure [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass "Live Sass Compiler"), I recommend you watch [this video tutorial](https://www.youtube.com/watch?v=A1tyKkkziTc&t=10s&ab_channel=FalconMasters "this video tutorial") from the [Falcon Masters channel](https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg "Falcon Masters channel").
In my case I have set the build directory as `dist/`. In case you configure this directory with another name, you must change it in the following line of the `index.html` file.
```html
```
Run the command to install bootstrap with npm
```
npm i
```
### Links
- Solution URL: [Testimonials grid page](https://testimonialgridchallenge.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- SCSS custom properties
- CSS Grid
- Mobile-first workflow
- [Bootstrap 5](https://getbootstrap.com/)
## What I learned
- Mobile-first Grid responsive to build layouts
- Flexbox
- Sizing (Viewports)
- Navbar
- Cards
- Media object
- Borders
- Import and custom Boostrap SCSS
- Custom bootstrap variables
## Testimonials Grid Page
## Stay in touch
- Website - [www.bryan-aguilar.com](https://www.bryan-aguilar.com/)
- Medium - [baguilar6174](https://baguilar6174.medium.com/)
- LinkeDIn - [baguilar6174](https://www.linkedin.com/in/baguilar6174)