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.

Table of Contents

• Frontend Mentor - Stats preview card component solution
  • Table of Contents
  • Overview
    • Description
    • Screenshots
      • Mobile Image
      • Desktop Image
  • The Process
    • Built With
    • What I learned
    • The code I used with <source>:
    • CSS Grid for Responsive Design
    • Helps
  • Links

Overview

Description

This is a challenge from the Frontend Mentor website. Completed by Tharun-dev(Code-Beaker).

Screenshots

Mobile Image

Desktop Image

The Process

The process I went through to creating complete the challenge.

Built With

• HTML5
• CSS3
• CSS Grid
• CSS Flex
• Mobile-first web design
• Responsive Design

What I learned

• About CSS Grid and its possibilities.
• Used HTML <source> element with understanding.

The code I used with <source>:

<source srcset="./myFolder/myImageName.jpg" media="(min-width: 600px)" />

CSS Grid for Responsive Design

main {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  main {
    grid-template-columns: 1fr 1fr;
  }
}

Helps

I got help from the Frontend Mentor Discord Community in some stages.

Links

• Live Site URL: https://code-beaker.github.io/stats-preview-card-component-code/
• GitHub Repository: https://github.com/Code-Beaker/stats-preview-card-component-code