Renumber steps and add final step

raspberrypilearning · Dec 13, 2024 · 073ee95 · 073ee95
1 parent 8902893
commit 073ee95
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 167 deletions.
diff --git a/en/images/letter-final.png b/en/images/letter-final.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -22,13 +22,10 @@ steps:
 - title: Ingredients
   completion:
   - engaged
-- title: 'Challenge: More ingredients'
 - title: Method
-- title: 'Challenge: More steps'
-- title: Colours!
+- title: Colours
 - title: Finishing touches
   completion:
   - internal
-- title: 'Challenge: More colours!'
-- title: 'Challenge: Reviews'
-- title: 'Challenge: More styling'
+- title: Challenge
+- title: What can you do now?
diff --git a/en/step_10.md b/en/step_10.md
diff --git a/en/step_11.md b/en/step_11.md
diff --git a/en/step_2.md b/en/step_2.md
@@ -64,3 +64,4 @@ You won’t see your list yet though, because you haven’t added any list items
 
 As your list is unordered, there are no numbers next to the list items, just bullet points.
 
+add your ingredients
diff --git a/en/step_3.md b/en/step_3.md
@@ -0,0 +1,33 @@
+## Method
+
+Next, let’s explain how to make your recipe.
+
+
+
++ You’re going to use another list to write your method, but this time you’ll be using an __ordered list__, by using the `<ol>` tag.
+
+An ordered list is a numbered list, which you should use when the order of the steps is important.
+
+Add this code underneath your ingredients list, making sure that it’s still inside your `<body>` tag:
+
+```
+<h3>Method:</h3>
+
+<ol>
+
+</ol>
+```
+
+![screenshot](images/recipe-method.png)
+
++ Now you just need to add list items into your new ordered list:
+
+```
+<li>Peel the banana and add to a blender</li>
+```
+
+![screenshot](images/recipe-ol.png)
+
+Notice that the list items are automatically numbered!
+
+add yours
diff --git a/en/step_4.md b/en/step_4.md
@@ -1,12 +1,57 @@
---- challenge ---
-## Challenge: More ingredients
-Can you add all of the ingredients for __your__ recipe?
+## Colours
 
-Your webpage should look something like this:
+Let’s add some colour to your recipe webpage.
 
-![screenshot](images/recipe-more-ingredients.png)
 
 
++ You’ve already learnt how to add coloured text to a webpage. Add this code inside your `style.css` file, to make all of the text in the website body blue:
+
+```
+body {
+    color: blue;
+}
+```
+
+![screenshot](images/recipe-blue.png)
+
++ Your browser knows colours like `blue`, `yellow` and even `lightgreen`, but did you know that your browser actually knows the __names__ of over 140 different colours?
+
+There’s a list of all the colour names you can use: [jumpto.cc/colours](http://jumpto.cc/colours), which includes colour names like `tomato`, `firebrick` and `peachpuff`.
+
+Change the text colour from `blue` to `tomato`.
+
+![screenshot](images/recipe-tomato.png)
+
++ Your browser knows the names of 140 colours, but actually knows the __colour values__ of more than 16 million colours!
+
+
+To tell the browser which colour to display, you just need to let it know how much red, green and blue to use.
+
+The amounts of red, green and blue are written as a number between `0` and `255`.
+
+![screenshot](images/recipe-rgb-img.png)
+
+Add this code to the CSS for the body of the webpage, to display a light yellow background:
+
+```
+background: rgb(250,250,210);
+```
+
+![screenshot](images/recipe-rgb.png)
+
++ If you prefer, you can tell the browser which colour to display by using a hexadecimal code (or __hex code__). This works in a similar way to the `rgb()` code above, except that hex codes always start with a `#`, and use hexadecimal ‘numbers’ between `00` and `ff` for the amount of red, green and blue.
+
+![screenshot](images/recipe-hex-img.png)
+
+Replace the `rgb()` code in your CSS with this hex code:
+
+```
+background: #fafad2;
+```
+
+![screenshot](images/recipe-hex.png)
+
+You should see the same light yellow as before!
+
 
 
---- /challenge ---
diff --git a/en/step_5.md b/en/step_5.md
@@ -1,32 +1,34 @@
-## Method
+## Finishing touches
 
-Next, let’s explain how to make your recipe.
+Let’s add a little more HTML and CSS to improve your webpage.
 
 
 
-+ You’re going to use another list to write your method, but this time you’ll be using an __ordered list__, by using the `<ol>` tag.
++ You can add a horizontal line at the end of your recipe, by using the `<hr>` tag.
 
-An ordered list is a numbered list, which you should use when the order of the steps is important.
+![screenshot](images/recipe-hr.png)
 
-Add this code underneath your ingredients list, making sure that it’s still inside your `<body>` tag:
+Notice that this tag doesn’t have an end tag, just like the `<img>` tag.
 
-```
-<h3>Method:</h3>
-
-<ol>
++ The line you’ve just added doesn’t match the style of the rest of your webpage. Let’s fix that by adding some CSS code:
 
-</ol>
+```
+hr {
+    height: 2px;
+    border: none;
+    background-color: tomato;
+}
 ```
 
-![screenshot](images/recipe-method.png)
+![screenshot](images/recipe-hr-css.png)
 
-+ Now you just need to add list items into your new ordered list:
++ You can even change how your bullet points look with this CSS code:
 
 ```
-<li>Peel the banana and add to a blender</li>
+ul {
+    list-style-type: square;
+}
 ```
 
-![screenshot](images/recipe-ol.png)
-
-Notice that the list items are automatically numbered!
+![screenshot](images/recipe-ul-css.png)
 
diff --git a/en/step_6.md b/en/step_6.md
@@ -1,12 +1,39 @@
 --- challenge ---
-## Challenge: More steps
-Can you add all of the steps for making __your__ recipe?
+## Challenge: More colours!
+Change the colours in your code by using colour names, `rgb()` values and hex codes. There’s a list of loads of colours at <a href="http://jumpto.cc/colours" target="_blank">jumpto.cc/colours</a>, or you can go to <a href="http://jumpto.cc/colour-picker" target="_blank">jumpto.cc/colour-picker</a> and create your own colours!
 
-Your method should look something like this:
+Here are some example colours:
 
-![screenshot](images/recipe-more-method.png)
++ Red can be written as:
+	+ `red` (obviously!)
+	+ `rgb(255,0,0)` (loads of red, no green and no blue)
+	+ `#ff0000`
 
++ Olive can be written as:
+	+ `olive`
+	+ `rgb(128, 128, 0)` (a bit of red and green, and no blue)
+	+ `#808000`
 
+Try to make sure that the colours you use match your recipe!
+
+
+Ask a few of your friends to leave a review for your recipe. You’ll need to make another list to do this.
+
+![screenshot](images/recipe-reviews.png)
+
+Can you add an image into your webpage? Or change the font? Here’s how your webpage could look:
+
+![screenshot](images/recipe-final.png)
+
+Here’s some code that will help you:
+
+```
+font-family: Arial / Comic Sans MS / Courier / Impact / Tahoma;
+font-size: 12pt;
+font-weight: bold;
+
+<img src="image-link-goes-here">
+```
 
 
 --- /challenge ---
diff --git a/en/step_7.md b/en/step_7.md
@@ -1,57 +1,18 @@
-## Colours!
+## What can you do now?
 
-Let’s add some colour to your recipe webpage.
+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 [Mystery letter](https://projects.raspberrypi.org/en/projects/mystery-letter) project. In this project, you will create a mystery letter that looks like each word has been cut from a different newspaper, magazine, comic or other source.
 
+--- print-only --- 
 
+![A message that reads 'Your next clue is in the safe. The code is 65536. Each word looks like it has been torn out of a magazine or newspaper](images/letter-final.png)
 
-+ You’ve already learnt how to add coloured text to a webpage. Add this code inside your `style.css` file, to make all of the text in the website body blue:
+--- /print-only ---
 
-```
-body {
-    color: blue;
-}
-```
-
-![screenshot](images/recipe-blue.png)
-
-+ Your browser knows colours like `blue`, `yellow` and even `lightgreen`, but did you know that your browser actually knows the __names__ of over 140 different colours?
-
-There’s a list of all the colour names you can use: [jumpto.cc/colours](http://jumpto.cc/colours), which includes colour names like `tomato`, `firebrick` and `peachpuff`.
-
-Change the text colour from `blue` to `tomato`.
-
-![screenshot](images/recipe-tomato.png)
-
-+ Your browser knows the names of 140 colours, but actually knows the __colour values__ of more than 16 million colours!
-
-
-To tell the browser which colour to display, you just need to let it know how much red, green and blue to use.
-
-The amounts of red, green and blue are written as a number between `0` and `255`.
-
-![screenshot](images/recipe-rgb-img.png)
-
-Add this code to the CSS for the body of the webpage, to display a light yellow background:
-
-```
-background: rgb(250,250,210);
-```
-
-![screenshot](images/recipe-rgb.png)
-
-+ If you prefer, you can tell the browser which colour to display by using a hexadecimal code (or __hex code__). This works in a similar way to the `rgb()` code above, except that hex codes always start with a `#`, and use hexadecimal ‘numbers’ between `00` and `ff` for the amount of red, green and blue.
-
-![screenshot](images/recipe-hex-img.png)
-
-Replace the `rgb()` code in your CSS with this hex code:
-
-```
-background: #fafad2;
-```
-
-![screenshot](images/recipe-hex.png)
-
-You should see the same light yellow as before!
+--- no-print ---
 
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/mystery-letter-starter" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+</iframe>
 
+--- /no-print ---
 
+Or, why not try out another [HTML & CSS](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) project.
diff --git a/en/step_8.md b/en/step_8.md
diff --git a/en/step_9.md b/en/step_9.md
Original file line number	Diff line number	Diff line change
Expand Up		@@ -64,3 +64,4 @@ You won’t see your list yet though, because you haven’t added any list items

		As your list is unordered, there are no numbers next to the list items, just bullet points.

		add your ingredients