Frontend Mentor - Stats preview card component solution

This is CKodes's second solution to the Stats preview card component challenge on Frontend Mentor. This solution was completed without the use of Bootstrap framework.

The first submission to this solution utilized Bootstrap.

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

Overview

The challenge

Users should be able to:

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

Screenshot

Desktop Screenshot

Mobile Page 1 Screenshot

Mobile Page 2 Screenshot

Links

• Frontend Mentor Solution Page
• Live Site

My process

Built with

• HTML | CSS

What I learned

• Prioritize media query for mobile wiew

Instead of working the site responsiveness from desktop to mobile view, I prioritized the media query for 375px first and then worked on the in-between widths.

• Centering

body,
html {
  height: 100%;
  margin: 0;
  width: 100%;
}

.holder {
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 10% 15%;
  width: 100vw;
}

• Better CSS formating

I grouped the CSS according to sections and arranged the properties in alphabetic order.

Continued development

• Add dark mode toggle
• Refactor code. Alot of repetitive lines especially in CSS.

Useful resources

Centering to vh and vw

• I liked this solution on how to center elements to 100vh and 100vw by using hidden overflows;

Author

• Frontend Mentor Profile @CKodes

Acknowledgments

Thank you to Dr. Angela Yu of The App Brewery for The Complete 2021 Web Development Bootcamp course and for introducing Frontend Mentor as a means to hone FE dev skills. This is my first Frontend Mentor challenge, and it was attempted after completing Lecture 84 - Media Query Breakpoints.