raspberrypilearning · lawsie · Dec 19, 2024 · May 31, 2022 · Jun 15, 2022 · Jun 16, 2022
diff --git a/en/code/wanted-complete/index.html b/en/code/wanted-complete/index.html
@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div>
+    <h1>Wanted!</h1>
+    <h3>Have you seen this robot?</h3>
+    <img src="robot.png">
+    <p>Description: Height: 30cm, Colour: purple and orange, Arms: 4</p>
+    <p>If you have any information, please contact 6207 332 2310</p>
+  </div>
+
+</body>
+
+</html>
diff --git a/en/code/wanted-complete/project_config.yml b/en/code/wanted-complete/project_config.yml
@@ -0,0 +1,3 @@
+name: 'Wanted Complete'
+identifier: 'wanted-complete'
+type: 'html'
diff --git a/en/code/wanted-complete/robot.png b/en/code/wanted-complete/robot.png
diff --git a/en/code/wanted-complete/style.css b/en/code/wanted-complete/style.css
@@ -0,0 +1,21 @@
+div {
+  text-align: center;
+  overflow: hidden;
+  border: 4px dotted red;
+  width: 400px;
+  background: yellow;
+  border-radius: 40px;
+}
+
+img {
+  width: 100px;
+  border: 1px solid black;
+  padding: 10px;
+}
+
+h1 {
+  font-family: Impact;
+  font-size: 3em;
+  margin: 10px;
+  text-decoration: underline;
+}
diff --git a/en/code/wanted-starter/boy.png b/en/code/wanted-starter/boy.png
diff --git a/en/code/wanted-starter/dinosaur.png b/en/code/wanted-starter/dinosaur.png
diff --git a/en/code/wanted-starter/girl.png b/en/code/wanted-starter/girl.png
diff --git a/en/code/wanted-starter/index.html b/en/code/wanted-starter/index.html
@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div>
+    <h1>Wanted!</h1>
+    <h3>Have you seen this robot?</h3>
+    <img src="robot.png">
+    <p>Description: Height: 30cm, Colour: purple and orange, Arms: 4</p>
+    <p>If you have any information, please contact 6207 332 2310</p>
+  </div>
+
+</body>
+
+</html>
diff --git a/en/code/wanted-starter/project_config.yml b/en/code/wanted-starter/project_config.yml
@@ -0,0 +1,3 @@
+name: 'Wanted Starter'
+identifier: 'wanted-starter'
+type: 'html'
diff --git a/en/code/wanted-starter/robot.png b/en/code/wanted-starter/robot.png
diff --git a/en/code/wanted-starter/style.css b/en/code/wanted-starter/style.css
@@ -0,0 +1,6 @@
+div {
+  text-align: center;
+  overflow: hidden;
+  border: 2px solid black;
+  width: 300px;
+}
diff --git a/en/images/recipe-final.webp b/en/images/recipe-final.webp
diff --git a/en/images/wanted-background.png b/en/images/wanted-background.png
diff --git a/en/images/wanted-finished-header.png b/en/images/wanted-finished-header.png
diff --git a/en/images/wanted-h1-margin-small.png b/en/images/wanted-h1-margin-small.png
diff --git a/en/images/wanted-h1-margin.png b/en/images/wanted-h1-margin.png
diff --git a/en/images/wanted-img-css.png b/en/images/wanted-img-css.png
diff --git a/en/images/wanted-img-width.png b/en/images/wanted-img-width.png
diff --git a/en/images/wanted-margin.png b/en/images/wanted-margin.png
diff --git a/en/images/wanted-newline.png b/en/images/wanted-newline.png
diff --git a/en/images/wanted-starter.png b/en/images/wanted-starter.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -8,24 +8,22 @@ copyedit: false
 curriculum: 1, design-1, programming-0, phys-comp-0, manufacture-0, community-0
 title: Wanted!
 description: Learn how to make your own poster.
-original_url: https://codeclubprojects.org/en-GB/webdev/wanted
 interests: art
 technologies: html-css-javascript
 site_areas: projects
 hardware: ''
 software: html-css-javascript
 version: 3.0.1
-last_tested: 2017-01-01
+last_tested: 2024-11-28
 steps:
-- title: Introduction
+- title: What you will make
 - title: Styling your poster
-- title: 'Challenge: Improving your poster'
-- title: Styling images
   completion:
   - engaged
-- title: 'Challenge: Improving your image'
+- title: Styling images
 - title: Styling headings
   completion:
   - internal
-- title: 'Challenge: Make your poster awesome!'
-- title: 'Challenge: Advertise an event!'
+- title: 'Challenge'
+  challenge: true
+- title: What can you do now?
diff --git a/en/step_1.md b/en/step_1.md
@@ -1,90 +1,17 @@
-## Introduction
+## What you will make
 
-In this project, you'll learn how to make your own poster.
+Learn how to make your own poster with HTML and CSS.
 
-![screenshot](images/wanted-final.png)
+--- print-only ---
+![A wanted poster for a robot](images/wanted-final.png)
 
-### Additional information for club leaders
+--- /print-only ---
 
-If you need to print this project, please use the [Printer friendly version](https://projects.raspberrypi.org/en/projects/wanted/print).
+--- no-print ---
 
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/wanted-complete" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe>
 
---- collapse ---
----
-title: Club leader notes
----
+--- /no-print ---
 
 
-## Introduction:
-In this project, children will have an opportunity to write their own CSS. They will also edit and write CSS properties and selectors to make their own poster.
 
-## Online Resources
-
-We recommend using [trinket](https://trinket.io/) to write HTML & CSS online. This project contains the following trinkets:
-
-+ ['Wanted' starting point -- jumpto.cc/web-wanted](http://jumpto.cc/web-wanted)
-
-Children can also make use of this blank trinket [(jumpto.cc/html-blank)](http://jumpto.cc/html-blank) to write their own HTML & CSS, or alternatively they can use this template trinket [(jumpto.cc/html-template)](http://jumpto.cc/html-template).
-
-There is also a trinket containing a sample solution to the challenges:
-
-+ ['Wanted' Finished -- trinket.io/html/ebeb56398a](https://trinket.io/html/ebeb56398a)
-
-## Offline Resources
-This project can be [completed offline](https://rpf.io/html-offline) if preferred. You can access the project resources by clicking the 'Project Materials' link for this project. This link contains a 'Project Resources' section, which includes resources that children will need to complete this project offline. Make sure that each child has access to a copy of these resources. This section includes the following files:
-
-+ template/index.html
-+ template/style.css
-+ wanted/index.html
-+ wanted/style.css
-+ wanted/robot.png
-
-You can also find a completed version of this project's challenges in the 'Club leader resources' section, which contains:
-
-+ wanted-finished/index.html
-+ wanted-finished/style.css
-+ wanted-finished/robot.png
-
-(All of the resources above are also downloadable as project and volunteer `.zip` files.)
-
-## Learning Objectives
-+ This project gives children the opportunity to write their own CSS to style a webpage.
-
-This project covers elements from the following strands of the [Raspberry Pi Digital Making Curriculum](http://rpf.io/curriculum):
-
-+ [Design basic 2D and 3D assets](https://www.raspberrypi.org/curriculum/design/creator).
-
-## Challenges
-+ "Improving your poster" - adding new CSS properties to the `div` selector;
-+ "Improving your image" - adding new CSS properties to the `img` selector;
-+ "Make your poster awesome" - adding new CSS properties and new `h3` and `p` selectors;
-+ "Advertise an event" - Writing and editing HTML and CSS code.
-
-
---- /collapse ---
-
-
---- collapse ---
----
-title: Project materials
----
-
-## Project resources
-* [.zip file containing all project resources](https://rpf.io/p/en/wanted-go)
-* [Online Trinket containing all 'Wanted!' project resources](http://jumpto.cc/web-wanted)
-* [Online Trinket template](http://jumpto.cc/trinket-template)
-* [Online blank Trinket](http://jumpto.cc/trinket-blank)
-* [template/index.html](resources/template-index.html)
-* [template/style.css](resources/template-style.css)
-* [wanted/index.html](resources/wanted-index.html)
-* [wanted/style.css](resources/wanted-style.css)
-* [wanted/robot.png](resources/wanted-robot.png)
-
-## Club leader resources
-* [.zip file containing all completed project resources](https://rpf.io/p/en/wanted-go)
-* [Online completed Trinket project](https://trinket.io/html/ebeb56398a)
-* [wanted-finished/index.html](resources/wanted-finished-index.html)
-* [wanted-finished/style.css](resources/wanted-finished-style.css)
-* [twanted-finished/robot.png](resources/twanted-finished-robot.png)
-
---- /collapse ---
diff --git a/en/step_2.md b/en/step_2.md
@@ -1,55 +1,110 @@
 ## Styling your poster
 
-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"}
 
+--- /task ---
 
-+ Open this trinket: <a target="_blank" href="http://jumpto.cc/web-wanted" target="_blank">jumpto.cc/web-wanted</a>. 
+--- task ---
+Press the **Run** button to see what the starter page looks like.
+--- /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: css
+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;
-	```
-
-	`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](images/wanted-newline.png)
-
-	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](images/wanted-background.png)
 
+--- /task ---
+
+--- task ---
+
+Change the `border` property to `4px dotted red`. What happens?
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 3
+---
+div {
+  text-align: center;
+  overflow: hidden;
+  border: 4px dotted red;
+  width: 300px;
+}
+--- /code ---
+--- /task ---
+
+--- task ---
+
+Change the `width` of the poster to `400px`. What happens?
+
+--- /task ---
+
+--- task --- 
+Add this code on the line below the width (but before the bracket `}`):
+
+--- code ---
+---
+language: css
+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 ---
+
+--- /task ---
+
+--- task ---
+What do you think will happen? Press the **Run** button to see whether you were right.
+
+--- /task ---
+
+--- task ---
+Add another line of code to change the border radius. Predict what you think will happen, then press the **Run** button to see whether you were right. 
+
+
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 7
+---
+div {
+  text-align: center;
+  overflow: hidden;
+  border: 2px solid black;
+  width: 300px;
+  background: yellow;
+  border-radius: 40px;
+}
+--- /code ---
+--- /task ---