Frontend Mentor - Stats preview card component

Welcome! 👋

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.

Overview

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: Live

Built with

• Semantic HTML5 markup
• CSS3 styling
• No frameworks or programming language was used. Just plain old HTML, CSS

What I learned

Building this project has helped me to fortify my CSS skills in the following departments

• Alignment: This is one of the issues I struggled with. After adding the flex property to the column classes, the card box was too spaced out and elements shrinked on smaller screens, by adding the max-width and margin: 0 auto; property, the text properly aligned to the container. This might help if you plan on taking this challenge

Code Snippets

I added the provided color code pallete to a var property as seen below. This pallete was really helpful to me adding it to a variable for easy reference is highly recommended.

:root {
  --main-background: hsl(233, 47%, 7%);
  --card-background: hsl(244, 38%, 16%);
  --accent: hsl(277, 64%, 61%);
  --main-heading: hsl(0, 0%, 100%);
  --text-secondary: hsla(0, 0%, 100%, 0.75);
  --text-secondary-card: hsla(0, 0%, 100%, 0.6);
}

Since the font family was gracefully provided by Frontend Mentor on google fonts, I added it to the css easily using the css import property. Do check it out for adding the fonts easily here

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

Continued development

Going forward, I would like to improve on my CSS skills -primarily on Alignment and Positioning. WHY!? well because I'm not quite satisfied with the length of CSS code I wrote to achieve this owing that to the alignment sections of this challenge.

Useful resources

• Cooolors - This helped me to generate and convert the HSL css color codes to HEX which I'm probably more used to.

Author

• Website - Victor Eke
• Frontend Mentor - @evavic44
• Twitter - @evavic44

Acknowledgments

Credit goes to the team at Frontend Mentor for putting out this challenge freely. You all ROCK! 💎