stats-preview-card-component's Introduction

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.

Overview
My process
Author

Overview

The challenge

Users should be able to:

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

Screenshot

Mobile

Desktop

My process

I basically built the desktop version first. Used HTML for the basic layout and styled it with my own pre-styled CSS classes.

For mobile, I adapted the desktop design using media queries.

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox

What I learned

I am much more adept at CSS now. I have even learnt by just looking at a design, how to style my CSS classes and then just apply those classes to html element.

For example, to center an element within the body:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="container center">
.
.
.
</div>

Continued development

I will continue to work on styling with native css. Only once I have a firm grasp of styling with native CSS, will I move on to pre-styled CSS - need an understanding of native CSS first.

Useful resources

CSS Tricks This is a very useful resource to learn the intracacies of CSS, the ones that basic manuals does not cover.
W3 Schools - This is an amazing resource for all web-development related work, pertaining to the most basic and popular languages used in web development.
MDN Web Docs This is a resource guide geared towards development for Firefox, but a lot of the concepts are applicable to mist browsers.