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
- Solution URL: https://github.com/syzgod/webdevproject1.git
- Live Site URL: https://syzgod.github.io/webdevproject1/
HTML + CSS, Flexbox
First lesson is online bootcamps and Youtube won't teach you writing codes. You need to actively practice coding and do projects, try solutions and read documentations(MDN...).
Flexbox is an amazing thing in CSS but can be a mess with wrong HTML nesting. That was my second biggest lesson that the HTML must be right in order to use Flex properly. Second huge learning was the flexbox itself. I will be honest, I struggled the most with getting the flex right. For some reason after watching many guides still couldn't understand it properly unless I tried myself and also asked for help. After getting it(hopefully) of course it is easy but definitely it is something which needs to be practiced a lot.
Different pictures to replace one with another depending on a device(desktop+mobile) was also a nice learning for me.
Media query is an amazing tool loving it, very useful these day when tablets and mobiles are pretty much mainstream.
Something very new for me: "mix-blend-mode: multiply;" - probably I'm not alone.
Also learning that Flexbox itself adds a basic margin, so resetting all the margins before we use flexbox can be very useful.
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
Note: Delete this note and the content within this section and replace with your own plans for continued development.
https://developer.mozilla.org/en-US/ - no need explanation :) https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Must have flexbox guide! https://css-tricks.com - The website is super useful in general, thankfully Google knows this.
- Website - Viktor Berczeli - sadly it's not real yet but getting there. Give me time and I will manage to have a proper portfolio!
- Frontend Mentor - @syzgod
- Twitter - @ViktorBerczeli - not really using it to be honest.
Big shoutout to my cousin, he is a webdev for so many years now. I will be still lost probably without him. Also big thanks to the Slack community especially to @Anna and @Grace! Thank for all the patience from my helpers!