Learning by building! ⌚
Hi, *|USERNAME|*!
A lot articles on the site cover the basics of what HTML, CSS, and JavaScript do. While those explain the trees (🌳) in great detail, they often don't describe the bigger picture involving the forest...and possibly the creatures (🦕, 👽, 😎, etc.) that live there! To mix things up a bit, the latest article on the site is dedicated to the forest. It is all about how to build a totally awesome analog clock (video):
In this guided walkthrough, we'll start with a blank page and slowly build up every part of the clock. It's not just about copying and pasting your way to completion. We will pause after each step to review what is going on so that you have a better understanding of how this clock works.
Now, why an analog clock? On the surface, an analog clock seems a bit boring. As it turns out, there is a lot of exciting little details that go into building one such as figuring out the layout, implementing the animation/timer loop, mapping between the time & clock hand rotation, and more. Beyond the details, there were some big and small decisions made during the building of it as well. Why does this clock use the DOM instead of the canvas? Is using CSS grid the best approach? Why not use Flexbox? If you have an answer or have related questions, feel free to ask in the forum thread dedicated to this clock.
TILL NEXT TIME!
As always, before I leave you to it, I would love to hear from you on things I can do better, topics you'd like me to write about, and more. Don't be shy! The easiest way to contact me is via Twitter or by posting on the forums (be sure to have a cool signature)!
Cheers,
Kirupa 😃