Introduction

In this project, you’ll learn how to make your own poster.

screenshot
screenshot

Step 1: Styling your poster

Let’s start by editing the CSS code for the poster.

Activity Checklist

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

    The project should look like this:

    screenshot
    screenshot
  • Click on the “style.css” tab. You’ll notice that there are already CSS properties for the div containing the different parts of the poster.

    div {
        text-align: center;
        overflow: hidden;
        border: 2px solid black;
        width: 300px;
    }   
  • Let’s start by altering the text-align property:

    text-align: center;

    What happens when you change the word center to left or right?

  • How about the border property?

    border: 2px solid black;

    2px in the code above means 2 pixels. What happens when you change 2px solid black to 4px dotted red?

  • Change the width of the poster to 400px. What happens to the poster?

  • Let’s add some CSS to set the background colour of the poster. Go to the end of line 5 of your code and press return, so that you have a new blank line.

    screenshot
    screenshot

    Type the following code on your new blank line:

    background: yellow;

    Make sure that you type in the code exactly as it is above. You should notice that the background of the <div> is now yellow.

    screenshot
    screenshot

Challenge: Improving your poster

Add the following CSS property to your div style:

border-radius: 40px;

What does this property do? What happens if you change the number in the code above?

Save Your Project

Step 2: Styling images

Let’s improve the style of the image in the poster.

Activity Checklist

  • At the moment, there aren’t any CSS properties for your <img> tag, so let’s add some!

    Firstly, add the following code underneath the CSS for your div:

    img {
    
    }
    screenshot
    screenshot
  • We can now add CSS properties for images between the { and } curly brackets.

    For example, add this code between the curly brackets to set the width of the image:

    width: 100px;

    You’ll see that the size of the image changes, so that its width is 100 pixels.

    screenshot
    screenshot
  • You can also add a border around the image with this code:

    border: 1px solid black;
  • Have you noticed that there’s not much space between the image and the border?

    screenshot
    screenshot

    You can fix this by adding some padding around the image:

    padding: 10px;

    Padding is the space between the content (in this case an image) and its border.

    screenshot
    screenshot

    What do you think would happen if you changed the padding to 50px?

Challenge: Improving your image

Can you give your image a background colour? Or a rounded border?

You can find more CSS colour names at jumpto.cc/colours.

Save Your Project

Step 3: Styling headings

Let’s improve the style of the <h1> heading.

Activity Checklist

  • Add the following code underneath your image’s CSS:

    h1 {
    
    }

    This is where you’ll add CSS properties for your main <h1> heading.

  • To change the font of your <h1> headings, add the following code between the curly brackets:

    font-family: Impact;
  • You can also change the size of the heading:

    font-size: 50pt;
  • Have you noticed that there’s a big space between the <h1> heading and the stuff around it?

    screenshot
    screenshot

    This is because there’s a margin around the heading. A margin is the space between the element (in this case a heading) and the other stuff around it.

    You can make the margin smaller with this code:

    margin: 10px;
    screenshot
    screenshot
  • You can also underline your heading:

    text-decoration: underline;

Challenge: Make your poster awesome!

Add more CSS code to style your <h3> headings and your paragraphs.

screenshot
screenshot

Here’s a list of some CSS properties you can use:

color: black;
background: white;
font-family: Arial / Comic Sans MS / Courier / Impact / Tahoma;
font-size: 12pt;
font-weight: bold;
text-decoration: underline overline line-through;
margin: 10px;
padding: 10px;
width: 100px;
height: 100px;

Save Your Project

Challenge: Advertise an event!

Can you make a poster for an event happening at your school? It could be a play, a sporting event, or even a poster advertising your Code Club!

Save Your Project