Project: Analog Clock

The first step in literally any program/application to be created for the web is to design its HTML. If the HTML is designed well, all other aspects of the program's development become peaches and cream.

So let's start designing the HTML for our analog clock.

Step one is to design the hierarchy of elements in the clock, and in the meanwhile come up with good and effective names for those elements.

Following the intuitive BEM naming convention, here are the components of our analog clock:

• .clock — represents the whole clock. Once designed, this can serve as the frame of the clock.
• .clock_graduation — represents a marking (also known as a graduation) on the clock.
• .clock_graduation--large — represents a major marking on the clock.
• .clock_hand — represents a hand of the clock. In total, there will be three .clock_hand elements in .clock.
• .clock_hand--seconds — represents the seconds hand.
• .clock_hand--minutes — represents the minutes hand.
• .clock_hand--hours — represents the hours hand.
• .clock_hand-nut represents the hand nut that holds all the hands of the clock together.

Once done, our analog clock will have the following HTML:

<div class="clock">
   <div class="clock_graduation--large"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <div class="clock_graduation"></div>
   <!--The HTML above repeats 11 times-->

   <div class="clock_hand clock_hand--hours"></div>
   <div class="clock_hand clock_hand--minutes"></div>
   <div class="clock_hand clock_hand--seconds"></div>
   <div class="clock_hand-nut"></div>
</div>

Now let's think about the CSS of each of the elements in this markup.