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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

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

Links

• Solution URL: https://github.com/phoobynet/fm-stats-preview-card-component-svelte
• Live Site URL: https://fm-stats-preview-card-component-svelte-phooby.vercel.app/

My process

Built with

• Svelte
• Vite
• Pure CSS
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I has been using Tailwind for these projects, but quickly realised that I was learning Tailwind, rather than learning CSS. I thought it would be harder without it, but it actually didn't feel that way.

I am very fond of Vue and I don't mind React, but Svelte is just lovely to work with.

Continued development

Having relied heavily on frameworks (component and/or utility) for most of work I did, going back to pure CSS was much easier than I thought it would be. However, I really need to get better at structuring CSS. I'm looking at Cube.css as a mental model for working with it efficiently.

Author

• Frontend Mentor - @phoobynet