Refactor unneeded steps

raspberrypilearning · Nov 28, 2024 · 9b86d6b · 9b86d6b
1 parent e0458cf
commit 9b86d6b
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 114 deletions.
diff --git a/en/images/wanted-background.png b/en/images/wanted-background.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-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
@@ -18,13 +18,12 @@ last_tested: 2024-11-28
 steps:
 - 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_2.md b/en/step_2.md
@@ -19,7 +19,7 @@ Change the word `center` to `left` or `right`, then press the **Run** button. Wh
 language: html
 line_numbers: true
 line_number_start: 1
-line_highlights: 2
+line_highlights: 3
 ---
 div {
   text-align: center;
@@ -84,3 +84,25 @@ div {
 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: html
+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 ---
diff --git a/en/step_3.md b/en/step_3.md
@@ -1,14 +1,101 @@
---- challenge ---
-## Challenge: Improving your poster
-Add the following CSS property to your `div` style:
+## Styling images
 
-```
-border-radius: 40px;
-```
+Let's improve the style of the image in the poster.
 
-What does this property do? What happens if you change the number in the code above?
+--- task ---
+Underneath the CSS for `div`, add another CSS style that will apply to images.
 
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 1
+line_highlights: 8-10
+---
+div {
+  text-align: center;
+  overflow: hidden;
+  border: 2px solid black;
+  width: 300px;
+  background: yellow;
+}
+img {
 
+}
+--- /code ---
 
+--- /task ---
 
---- /challenge ---
+--- task ---
+
+Any CSS properties you add to this `img` style will apply to images.
+
+Add this code to set the width of the image:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 8
+line_highlights: 9
+---
+img {
+	width: 100px;
+}
+--- /code ---
+--- /task ---
+
+--- task ---
+
+Press **Run** and you'll see that the size of the image changes, so that its width is 100 pixels.
+
+--- /task ---
+
+--- task ---
+Add a border around the image:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 8
+line_highlights: 10
+---
+img {
+	width: 100px;
+	border: 1px solid black;
+}
+--- /code ---
+
+--- /task ---
+
+Have you noticed that there's not much space between the image and the border? The space between the image and its border is called **padding**.
+
+![An image of a robot with a black border. The border is touching the robot image.](images/wanted-img-border.png)
+
+--- task ---
+
+Add some padding around the image:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 8
+line_highlights: 11
+---
+img {
+	width: 100px;
+	border: 1px solid black;
+	padding: 10px;
+}
+--- /code ---
+
+--- /task ---
+
+--- task ---
+Press **Run** to see the extra padding
+
+![An image of a robot with a black border. There is a gap between the robot image and the border.](images/wanted-img-padding.png)
+
+--- /task ---
diff --git a/en/step_4.md b/en/step_4.md
@@ -1,51 +1,48 @@
-## Styling images
+## Styling headings
 
-Let's improve the style of the image in the poster.
+Let's improve the style of the `<h1>` heading.
 
 
 
-+ 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:
++ Add the following code underneath your image's CSS:
 
 	```
-	img {
+	h1 {
 
 	}
 	```
 
-	![screenshot](images/wanted-img-css.png)
-
-+ We can now add CSS properties for images between the curly brackets.
+	This is where you'll add CSS properties for your main `<h1>` heading.
 
-	For example, add this code between the curly brackets to set the width of the image:
++ To change the font of your `<h1>` headings, add the following code between the curly brackets:
 
 	```
-	width: 100px;
+	font-family: Impact;
 	```
 
-	You'll see that the size of the image changes, so that its width is 100 pixels.
-
-	![screenshot](images/wanted-img-width.png)
-
-+ You can also add a border around the image with this code:
++ You can also change the size of the heading:
 
 	```
-	border: 1px solid black;
+	font-size: 50pt;
 	```
 
-+ Have you noticed that there's not much space between the image and the border?
++ 	Have you noticed that there's a big space between the `<h1>` heading and the stuff around it?
 
-	![screenshot](images/wanted-img-border.png)
+	![screenshot](images/wanted-h1-margin.png)
 
-	You can fix this by adding some padding around the image:
+	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:
 
 	```
-	padding: 10px;
+	margin: 10px;
 	```
 
-	Padding is the space between the content (in this case an image) and its border.
+	![screenshot](images/wanted-h1-margin-small.png)
+
++ You can also underline your heading:
 
-	![screenshot](images/wanted-img-padding.png)
+	```
+	text-decoration: underline;
+	```
 
-	What do you think would happen if you changed the padding to `50px`?
diff --git a/en/step_5.md b/en/step_5.md
@@ -1,9 +1,27 @@
+## Challenge
+
 --- challenge ---
-## Challenge: Improving your image
-Can you give your image a background colour? Or a rounded border?
 
-You can find more CSS colour names at <a href="http://jumpto.cc/colours" target="_blank">jumpto.cc/colours</a>.
+Add more CSS code to style your `<h3>` headings and your paragraphs. 
+
+![screenshot](images/wanted-final.png)
+
+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;
+```
 
+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!
 
 
 

diff --git a/en/step_6.md b/en/step_6.md
@@ -1,48 +1,18 @@
-## Styling headings
+## What can you do now?
 
-Let's improve the style of the `<h1>` heading.
+If you are following the [HTML & CSS: Module 1](https://projects.raspberrypi.org/en/pathways/webdev-module-1) pathway, you can move on to the [Recipe](https://projects.raspberrypi.org/en/projects/recipe/) project. In this project, you will learn how to create a webpage for your favourite recipe.
 
+--- print-only --- 
 
+![ALT TEXT](images/IMAGE-FROM-PROJECT.png)
 
-+ Add the following code underneath your image's CSS:
+--- /print-only ---
 
-	```
-	h1 {
+--- no-print ---
 
-	}
-	```
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/STARTER_PROJECT_SLUG" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+</iframe>
 
-	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](images/wanted-h1-margin.png)
-
-	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](images/wanted-h1-margin-small.png)
-
-+ You can also underline your heading:
-
-	```
-	text-decoration: underline;
-	```
+--- /no-print ---
 
+Or, why not try out another [HTML](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) project.
diff --git a/en/step_7.md b/en/step_7.md
diff --git a/en/step_8.md b/en/step_8.md