Frontend Mentor - Testimonials grid section solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: https://jaycgreenwald.github.io/18-testimonials-grid-section/

My process

• Hold on for dear life.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS/SCSS

What I learned

How to use SASS functions. Here are a couple of the articles I reviewed while building my first function. https://dev.to/nikolab/convert-px-to-rem-using-sass-3-methods-4ep2 https://gil0mendes.io/blog/sass-rem-to-px/

How to trim decimal places from numbers in SASS. https://css-tricks.com/snippets/sass/fix-number-n-digits/ https://www.sitepoint.com/a-tale-of-css-and-sass-precision/

How to create a VS Code snippet. Which I used to insert my new SASS function thankyouverymuch. https://code.visualstudio.com/docs/editor/userdefinedsnippets

// functions 
@function pxToRem($pxValue) {
    $remValue: round(($pxValue / 13) * 100) / 100; 
    @return #{$remValue}rem;
}

Continued development

1. Should I be using rem unit for EVERYTHING? Like, what are the cases in which I would want to use px instead of REM as the unit?
2. Can grid automatically layout content? I think this answer may be depends...? I started watching Jen Simmons grid videos so I'm on my way to obtaining that sacred knowledge.
3. The rest of it (moves arm in sweeping motion).

Useful resources

Mostly sourced in "What I Learned" above. Here's a bonus resource and it appears to be a dandy:

• YouTube Channel Layout Land by Jen Simmons

Author

• Website - My GitHub
• Frontend Mentor - @jaycgreenwald
• Twitter - @jaycgreenwald