Skip to content

Commit

Permalink
Update step 2
Browse files Browse the repository at this point in the history
  • Loading branch information
lawsie committed Nov 28, 2024
1 parent eaa5d0a commit e0458cf
Showing 1 changed file with 64 additions and 33 deletions.
97 changes: 64 additions & 33 deletions en/step_2.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,85 @@

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

--- task ---

Open the [starter project](https://editor.raspberrypi.org/en/projects/wanted-starter){:target="_blank"}

+ Open this trinket: <a target="_blank" href="http://jumpto.cc/web-wanted" target="_blank">jumpto.cc/web-wanted</a>.
--- /task ---

The project should look like this:

![screenshot](images/wanted-starter.png)

+ 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.
--- task ---

```
div {
text-align: center;
overflow: hidden;
border: 2px solid black;
width: 300px;
}
```
Click on the "style.css" file and find the `text-align` property.

+ Let's start by altering the `text-align` property:
Change the word `center` to `left` or `right`, then press the **Run** button. What happens?

```
text-align: center;
```
--- code ---
---
language: html
line_numbers: true
line_number_start: 1
line_highlights: 2
---
div {
text-align: center;
overflow: hidden;
border: 2px solid black;
width: 300px;
}
--- /code ---

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

+ How about the `border` property?

```
border: 2px solid black;
```
--- /task ---

--- task ---

Change the `border` property to `4px dotted red`. What happens?

`2px` in the code above means 2 pixels. What happens when you change `2px solid black` to `4px dotted red`?
--- code ---
---
language: html
line_numbers: true
line_number_start: 1
line_highlights: 3
---
div {
text-align: center;
overflow: hidden;
border: 2px solid black;
width: 300px;
}
--- /code ---
--- /task ---

+ Change the `width` of the poster to `400px`. What happens to the poster?
--- task ---

+ 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.
Change the `width` of the poster to `400px`. What happens?

![screenshot](images/wanted-newline.png)
--- /task ---

Type the following code on your new blank line:
--- task ---
Add this code on the line below the width (but before the bracket `}`):

```
background: yellow;
```
--- code ---
---
language: html
line_numbers: true
line_number_start: 1
line_highlights: 6
---
div {
text-align: center;
overflow: hidden;
border: 2px solid black;
width: 300px;
background: yellow;
}
--- /code ---

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.
--- /task ---

![screenshot](images/wanted-background.png)
--- task ---
What do you think will happen? Press the **Run** button to see whether you were right.

--- /task ---

0 comments on commit e0458cf

Please sign in to comment.