Frontend Mentor - Stats preview card component solution

This is a solution to the Stats preview card 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
• Author

Overview

This is a Stats Preview Card solution.

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: Github repo
• Live Site URL: The site

Built with

• Semantic HTML5 markup
• SCSS preprocesser
• Flexbox

What I learned

A seemingly hacky solution that I came up with for making header texts responsive:

#title {
  // This is a hack (well, a good one). 1.612 is the square root of 2.6
  // 2.6vw is the correct text size at dimension 1440x800
  // I think it helps the text to expand exponentially
  // See Inverse Square Law
  font-size: 1.612 * 1.612vw;
}

Continued development

I really love @mixin in SCSS, and it's very useful when there's a lot of code. Definitely gonna find a new way to use it later.

Author

• Frontend Mentor - @Kemystra
• Twitter - @Kemystra