Stats preview card component

Table of contents

Overview

The challenge

Users should be able to:

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

Screenshot

Mobile-version Desktop-version

Links

My process

I started the project with building out all the HTML first and with mobile-first responsiveness. After the HTML was complete, I started styling top to bottom. After the initial styles were added, I made the card desktop responsive as well using CSS Flexbox styles.

Built with

  • HTML
  • CSS custom properties
  • Flexbox
  • Bootstrap
  • Mobile-first workflow

Useful resources

Author