Frontend Mentor - stats-preview-card-component

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
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

• It was my first FrontEndMentor's challenge. • I learned how to use and organize variables in CSS code:

:root {
    --very-dark-blue: hsl(233, 47%, 7%);
    --dark-desaturated-blue: hsl(244, 38%, 16%);
    --soft-violet: hsl(277, 64%, 61%);
}

• I learned to work with flexbox and some flex-grid techniques. Some examples:

    display: flex;
    flex-direction: column;
    grid-row: 1/2;

Useful resources

• B7 Web - B7Web is an online web developer course from Brazil. So i learned how to write HTML and CSS codes studying B7Web's classes.

Author

• Website - André dos Reis
• Frontend Mentor - @andrebdosreis
• Twitter - @andrebdosreis

Acknowledgments

Thanks FrontEndMentor.io for challenge. I'm learning a lot with you.