Make a Robot (CSS positioning, id selectors)

In this project, you'll learn how to position images on a website and design your own robot!

1. Visit bit.ly/MakeaRobot to open a starter project. Click the "Fork" button to make your own copy.
   
   Open the index.html file and take a look. Each image tag <img> has its own id. You can use an image's id to give it its own style, using the # symbol in your CSS file.

   
2. Open the style.css file. Add the following CSS code to adjust the robot's eyes.

       #eyes1 {
         width: 200px;
       }

   Save your file, then refresh the webpage. What happens? Notice that you're styling only the eyes1 image by using #eyes1 in your CSS code. If you prefer different eyes, you can use #eyes2 or #eyes3 instead.
   
3. Notice how each image is displayed one after the other? This is called relative positioning. If you want to tell the web browser exactly where to place your robot’s eyes, you’ll need to use absolute positioning instead.
   
   Add the following CSS code to adjust the eyes1 image:

       position: absolute;
       top: 200px;
       left: 100px;

   The eyes should move to the correct place on the robot's face.
   

4. The CSS position is measured from the top-left corner of the webpage. You can use bottom instead of top to tell the browser how far from the bottom of the screen to show the image, as well as right instead of left.

   
5. Let's give your robot a mouth! Add the following CSS code to the style.css file.

       #mouth1 {
         width: 50px;
         position: absolute;
         top: 200px;
         left: 200px;
       }

   Hmmm... that's not quite right. The mouth istoo small and not in the right place! Can you fix it?
   

6. Use what you’ve learned to finish designing your own robot. Here are some examples of how your robot might look.

   
7. (Optional) Try adding buttons and some JavaScript using the techniques you learned in the Make a Card project to give your robot a little animation at the press of a button and to reset the face by pressing a different button. Make their eyes rotate! Make their mouths move!
   
   You can change multiple elements in a JavaScript function by adding more lines, making sure that each line ends in a semicolon.

   function animate() {
     document.getElementById('eyes1').className = 'rotated';
     document.getElementById('eyes2').className = 'rotated';
     ...
   }

Credits: this lesson was adapted from both Toni Scullion's lesson plan and the corresponding Raspberry Pi Foundation project.