How I Built My first CSS Animation as a free-code-camp student.

I recently started using the 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!




Software developer, passionate about coding and blogging about it.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

We are almost there…

Upload Attachments from ServiceNow to Azure Blob Storage

1, 2, 3, 4… Compiled! -All about gcc.

Free cloud resources to get hands-on cloud computing

StorPool Presents at Cloud Field Day 9

StorPool Presents at Cloud Field Day 9

Linux under the Hood — Memory Management

The Keys to the Castle

Data Communication with AWS: Part 4- App Dev Series 10

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Haruna oseni

Haruna oseni

Software developer, passionate about coding and blogging about it.

More from Medium

Advice for beginning Web Development

My Unit 3 Construct Week Project At Masai

Beginner’s Guide to Front-End Development

Phase 1 and How I Found About APIs the Hard Way