This is a solution to the Stats preview card component challenge on Frontend Mentor.
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.
- elements are inline and do not break the flow of the paragraph or heading.
- 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)
- To make the webpage scale according to device browser, we include set the viewport properties to allow proper scaling.
- iusing media queries to set up breakpoints for changes in dimensions of the layout
- It is always best to start with the mobile layout as it allows you to build upon that into larger dimensions.
- 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.
- 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