Introduction

In this project, you’ll learn how to position images to create your own robot!

screenshot
screenshot

Step 1: Giving your robot eyes

Let’s give your robot some eyes!

Activity Checklist

  • Open this trinket: jumpto.cc/web-robot.

    The project should look like this:

    screenshot
    screenshot
  • Each image in this project has it’s own name (or id). For example, the HTML for the face and eye images (‘face’, ‘eyes1’ and ‘eyes2’ starting on line 8 of your code) looks like this:

<img id="face" ...>
<img id="eyes1" ...>
<img id="eyes2" ...>
  • You can use an image’s id to give it it’s own style, by using the # symbol. This allows you to style each image separately.

Click on the style.css file. Notice how the size of the robot’s face and the other images are different?

screenshot
screenshot
  • Add this CSS code to style the robot’s eyes:
#eyes1 {
    width: 200px;
}

Notice that you’re styling just the eyes1 image, by using #eyes1 in your CSS. If you prefer, you can use #eyes2 or #eyes3 instead!

screenshot
screenshot
  • Notice how each image is displayed one after the other? This is called relative positioning. If you want to tell the browser exactly where to place your robot’s eyes, you’ll need to use absolute positioning instead.

Add these 3 lines of code to the CSS for your eyes1 image:

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

You should see that your robot’s eyes move to the correct place on your robot.

screenshot
screenshot

This CSS code tells the browser how far from the top / left of the webpage to display the image.

screenshot
screenshot

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 using right instead of left.

Step 2: Giving your robot a mouth

Let’s give your robot a mouth!

Activity Checklist

  • Add the following CSS code to style your mouth1 image:
#mouth1 {
    width: 50px;
    position: absolute;
    top: 200px;
    left: 200px;
}
  • Your robot’s mouth looks quite small, and isn’t in the right place.
screenshot
screenshot

Can you fix this, by making changes to your CSS?

Save Your Project

Challenge: Design your own robot

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

screenshot
screenshot

Save Your Project

Challenge: Add your own images

Can you find extra images to add to your robot, and position them on your webpage? You could even replace the robot face with your own!

<img id="face" src="myFace.png">

Save Your Project