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.
Users should be able to:
- View the optimal layout depending on their device's screen size
I basically built the desktop version first. Used HTML for the basic layout and styled it with my own pre-styled CSS classes.
For mobile, I adapted the desktop design using media queries.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I am much more adept at CSS now. I have even learnt by just looking at a design, how to style my CSS classes and then just apply those classes to html element.
For example, to center an element within the body:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<div class="container center">
.
.
.
</div>I will continue to work on styling with native css. Only once I have a firm grasp of styling with native CSS, will I move on to pre-styled CSS - need an understanding of native CSS first.
-
CSS Tricks This is a very useful resource to learn the intracacies of CSS, the ones that basic manuals does not cover.
-
W3 Schools - This is an amazing resource for all web-development related work, pertaining to the most basic and popular languages used in web development.
-
MDN Web Docs This is a resource guide geared towards development for Firefox, but a lot of the concepts are applicable to mist browsers.
- Frontend Mentor - @VernonDodo
- Twitter - @likeavernon