Add images and update first step

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

Hide file tree

Showing 12 changed files with 60 additions and 48 deletions.
diff --git a/en/code/recipe-complete/banana.jpg b/en/code/recipe-complete/banana.jpg
diff --git a/en/code/recipe-starter/banana.jpg b/en/code/recipe-starter/banana.jpg
diff --git a/en/code/recipe-starter/chocolate.jpg b/en/code/recipe-starter/chocolate.jpg
diff --git a/en/code/recipe-starter/dough.jpg b/en/code/recipe-starter/dough.jpg
diff --git a/en/code/recipe-starter/fruit.jpg b/en/code/recipe-starter/fruit.jpg
diff --git a/en/code/recipe-starter/milk.jpg b/en/code/recipe-starter/milk.jpg
diff --git a/en/code/recipe-starter/pepper.jpg b/en/code/recipe-starter/pepper.jpg
diff --git a/en/code/recipe-starter/rice.jpg b/en/code/recipe-starter/rice.jpg
diff --git a/en/code/recipe-starter/tomatoes.jpg b/en/code/recipe-starter/tomatoes.jpg
diff --git a/en/meta.yml b/en/meta.yml
@@ -19,7 +19,6 @@ version: 3
 last_tested: 2017-01-01
 steps:
 - title: What you will make
-- title: Decide on a recipe
 - title: Ingredients
   completion:
   - engaged

diff --git a/en/step_2.md b/en/step_2.md
@@ -1,13 +1,66 @@
-## Decide on a recipe
+## Ingredients
 
-Before you get coding, you’ll need to decide on a recipe.
+The example recipe you’ll see in this project is for a banana milkshake, but you can choose your own.
 
+Let’s list the ingredients that are needed for your recipe.
 
+--- task ---
+Open the [starter project](https://staging-editor.raspberrypi.org/en/projects/recipe-starter){:target="_blank"}.
+--- /task ---
 
-+ Think about a recipe you want to share with your friends. It could be:
-	+ A recipe you found online;
-	+ Your favourite meal;
-	+ Something you made up!
+--- task ---
+In the `<body>` section, add a title for your recipe.
 
-The example recipe you’ll see in this project is for a banana milkshake. You can copy this recipe if you can’t find one of your own.
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 7
+line_highlights: 8-10
+---
+<body>
+<h1>Banana Milkshake</h1>
+
+<h3>Ingredients:</h3>
+
+</body>
+--- /code ---
+
+--- /task ---
+
+--- task ---
+The `<ul>` tag creates an unordered list. Add the tags to start and end your list. 
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 10
+line_highlights: 11-13
+---
+<h3>Ingredients:</h3>
+<ul>
+
+</ul>
+
+</body>
+--- /code ---
+
+--- /task ---
+
++ View your webpage, and you should see your two headings.
+
+![screenshot](images/recipe-headings.png)
+
+You won’t see your list yet though, because you haven’t added any list items to it!
+
++ The next step is to add list items into your list, by using the `<li>` tag. Add the following code inside your `<ul>` tag:
+
+```
+<li>1 banana</li>
+```
+
+![screenshot](images/recipe-ul.png)
+
+As your list is unordered, there are no numbers next to the list items, just bullet points.
 
diff --git a/en/step_3.md b/en/step_3.md