This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
What did I learn? It has been a month since I have done any HTML-CSS since I have been learning some more JS and DSA using the JS path from The Odin Project (TOP). So, I had some time off essentially. After learning HTML-CSS from Jonas Schedtmann, I was used to the desktop-first layout approach. I was trying to use mobile-first but it wasn’t fully clicking. Now, using mobile-first in this challenge… it actually clicked and is very straightforward.
The mental shift was just one sentence: “Don’t think about the desktop styles while designing the mobile view”. I was always worrying about what’d have to be changed for desktop so I can already account for it, but I can always account for it later as well when I am actually doing the desktop layout.
Also, this was the first challenge that I created with React. In this case, I didn’t really use any react concepts yet, but did the styling and formed some components in React. It is interesting how much easier it is to reason about it all right now using components instead of having an HTML document with the whole structure.
Also, React makes it really easy… you just have to change the state to update the view… no need for DOM manipulation anymore.