Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component 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 component depending on their device's screen size
• See a hover state on desktop for the Sign Up call-to-action

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/single-price-grid-component-html-sass-grid-and-vite-bPAyz8cJe
• Live Site URL: https://fem09-single-price-grid-component-drrck.netlify.app/

My process

Built with

• Mobile-first workflow
• Semantic HTML5 markup
• CSS Grid
• Flexbox
• Sass - CSS with superpowers
• Vite - Superfast bundling tool

What I learned

I learned to create a Sass function that converts px units to rem units. Here is the function I use for font sizing:

@use 'sass:math';

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16) * 1rem;
}

Continued development

I would like to possibly redo this solution using Open Props sub-atomic styles.

Useful resources

• Sass: math.div function - This is the modern method of dividing two numbers

Author

• Frontend Mentor - @DarrickFauvel
• LinkedIn - Darrick Fauvel

Acknowledgments