This is a solution to the Stats preview card component challenge on Frontend Mentor.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Users should be able to:

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

• This is the screenshot for the desktop layout 1440x700 -This is the screenshot for the mobile layout

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• CSS custom properties
• Sass
• Flexbox

No one is perfect, but one can aim to be the best at what they do. Through this challenge I have learnt a lot. The highlights of them are listed below.

1. elements are inline and do not break the flow of the paragraph or heading.
2. hsl()/hsla() is another method to denote color through hue(color on the wheel), saturation(amount of color) and light(amount of black or white added)
3. To make the webpage scale according to device browser, we include set the viewport properties to allow proper scaling.
4. iusing media queries to set up breakpoints for changes in dimensions of the layout
5. It is always best to start with the mobile layout as it allows you to build upon that into larger dimensions.

1. The component is still not compleetly responsive and breaks on a lot of layouts. A further improvement to this would be a fully responsive component.
2. The spacings are a bit odd would need to learn efficient spacing rules

• Specific Colors in a string of text - This thread helps explain how to change properties of certain texts in a group without messing up the flow(newlines/spacing etc)
• Flexbox - This is an amazing article which helped me finally understand flexbox and how it works. This article is visually rich with images.

• Website - H P Pranaav
• Frontend Mentor - @hppranaav