CSS has always been a skill that I am possessing a partial understanding, yet not fully proficient.
With some spare time, I shift my focus on building mobile app with React Native to polishing up my skills in web front end development.
While it's easy to get a web app up and running with NextJS and style it with TailwindCSS, I find myself focusing more on the development velocity and features more than the aesthetic aspect of it. That is okay for most of the time but it feels more satifying to be able to publish web app that is useful and at the same time good looking.
Therefore I took the 100 Days CSS Challenge to satify my craving for building beautiful UI.
Having focused on building mobile app with react-native makes me comfortable to be able to deliver good looking UI with a subset of CSS knowledge. Now, I wish to expand that boundary and mastering CSS skills.
At day 47, here are lessons I learned along the way:
Coming from react-native world, I did animation differently with Animated api. In CSS, animation and transition are used heavily for visually engaging UI. At first, the usage of these two are often hard to distinguish.
Luckily it doesn't take long to differentiate the purpose and usage of the two. animation offers fine grained control during the course of the effects while transition gives a simpler way to achieve changes in CSS properties. Both have their place and is it's easy to confuse when to use which.
Animating shapes could be tricky sometimes. For example when adding a rounded border cap to a half circle is harder than I initially anticipated. SVG comes in handy when it offers a way to do it. The only tradeoff is dealing with coordinate system in drawing can be overwhelming.
Vanilla CSS is great, it is better with SCSS. A lot of classes can be styled dynamically with loops and mixins, therefore easier to develop and maintain.
Most of the time, when you are presented with an UI, it is easier to solve it with complicated approach. It takes practices to break down the problems and implement simpler solution.
Other related front end stuffs lke understanding what is PostCSS, Autoprefixer, bundling process, developer debug tool, 12 principles of animation and default behaviour of TailwindCSS also worth mentioning. Although I got sidetracked with finding out how stuffs works, but it feels great to finally knowing these tools that I am using frequently.
That's all for my lessons learned.
Thanks for reading. Happy coding!