Time for action – placing Ping Pong game elements in the DOM

1. We will continue from our jQuery installation example, and open the index.html file in a text editor.

2. Then, we will create the following playground and game objects with DIV nodes in the body. There are two paddles and one ball inside the playground, and the playground is placed inside the game:

   <div id="game">
     <div id="playground">
       <div class="paddle-hand right"></div>
       <div class="paddle-hand left"></div>
       <div id="paddleA" class="paddle"></div>
       <div id="paddleB" class="paddle"></div>
       <div id="ball"></div>
     </div>
   </div>

3. We now have the structure of the game object ready, and it is time to apply styles to them. We will add the following styles to the pingpong.css file:

   #game {
     position: relative;
     width: 400px;
     height: 200px;
   }
   #playground{
     background: url(../images/playground.png);
     background-size: contain;
     width:...