How I Built My first CSS Animation as a free-code-camp student.
I recently started using the freecodecamp.org curriculum to assist in my learning to code for web-development, having prior knowledge in programming I was able to understand the concepts of basic HTML and HTML5 which comprises of 28 topics (and It was pretty awesome to learn HTML again, in an interactive way this time). The next curriculum which was basic CSS which comprised of 44 great topics was pretty fun, I was able to write a nice presentation with CSS in the cat app’s interactive challenge.
Now the fun part begins, the next concept covered within free-code-camps tutorial was Applied visual design which came packed with knowledge of applying different CSS property and values for better presentation, with the animation property, values and @ keyframes rule (basically ways to get started with animations in CSS). After getting done with the applied visual design concept, I immediately started on a custom project to build an animation clock which served as a revision to various knowledge acquired during my learning at free-code-camp, some googling (blog, article, websites and stack overflow became my best friend) which led me to cement the knowledge and learn additional stuff like the transform-origin CSS property and the Bezier curve. I enjoyed building the clock animation project using pure CSS and HTML (although the hands of the clocks are still all over the place), It not only helped me understand the concept more but helped strengthen my “bringing ideas to life” muscle, I believe every programmer should have.
Here is my code-pen with my clock animation
I know it sucks, please be sure to hit me up on how to make it suck less on twitter @ HarunaOseni, and thank you for reading my first ever blog post!