Frontend Mentor - Stats preview card component solution by Jorge H. Guzmán J.

This is a solution to the Stats preview card component. 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
• Continued development
• Useful resources
• Author

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

Links

• Solution URL: FrontEnd Mentor: My Solution
• Live Site URL: GitHub Page: Stats preview card component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Desktop-first workflow
• Mobile workflow at the end

What I learned

I have learned about @media, overlay, position, flex direction and mix-blend-mode

Also about the display option:

.main {
  margin: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

And finally, how to adjust sizes of images, texts and boxes according to the size of the screen:

@media (max-width: 476px) {
  section {
    height: 600px;
    width: 302px;
    flex-direction: column-reverse;
    position: absolute;
    justify-content: flex-end;
  }

Continued development

In the future, my goal is:

• learn the property of position in more depth
• better organize html

Useful resources

• MDN Web Docs - This helped me about many properties.
• CCS Web Docs - This helped me with the display properties.

Author

• Website - Jorge H. Guzmán J. I plan to create it later.
• Frontend Mentor - @jhguzmanj
• GitHub - jhguzmanj