Merge pull request #56 from raspberrypilearning/draft

Updates
raspberrypilearning · Dec 19, 2024 · 34bf183 · 34bf183
2 parents f0258cf + f948177
commit 34bf183
Show file tree

Hide file tree

Showing 33 changed files with 205 additions and 167 deletions.
diff --git a/en/code/tell-a-story-starter/index.html b/en/code/tell-a-story-starter/index.html
@@ -1,18 +1,18 @@
 <html>
 
-  <head>
-    <link rel="stylesheet" href="style.css">
-  </head>
+<head>
+  <link rel="stylesheet" href="style.css">
+</head>
 
-  <body>
-  
-    <h1>My Story</h1>
-    
-    <div>
-      <img src="sun.png">
-      <p>It was a beautiful day...</p>
-    </div>
-    
-  </body>
+<body>
+
+  <h1>My Story</h1>
+
+  <div>
+    <img src="sun.png">
+    <p>Add your own text here!</p>
+  </div>
+
+</body>
 
 </html>
diff --git a/en/images/codeed-css.png b/en/images/codeed-css.png
diff --git a/en/images/codeed-images.png b/en/images/codeed-images.png
diff --git a/en/images/codeed-part2.png b/en/images/codeed-part2.png
diff --git a/en/images/codeed-starter.png b/en/images/codeed-starter.png
diff --git a/en/images/story-changes.png b/en/images/story-changes.png
diff --git a/en/images/story-div.png b/en/images/story-div.png
diff --git a/en/images/story-drag.png b/en/images/story-drag.png
diff --git a/en/images/story-elements.png b/en/images/story-elements.png
diff --git a/en/images/story-files.png b/en/images/story-files.png
diff --git a/en/images/story-final.png b/en/images/story-final.png
diff --git a/en/images/story-html.png b/en/images/story-html.png
diff --git a/en/images/story-image-name-add.png b/en/images/story-image-name-add.png
diff --git a/en/images/story-image-name.png b/en/images/story-image-name.png
diff --git a/en/images/story-image.png b/en/images/story-image.png
diff --git a/en/images/story-img-tag.png b/en/images/story-img-tag.png
diff --git a/en/images/story-paragraph.png b/en/images/story-paragraph.png
diff --git a/en/images/story-see-images.png b/en/images/story-see-images.png
diff --git a/en/images/story-starter.png b/en/images/story-starter.png
diff --git a/en/images/story-upload.png b/en/images/story-upload.png
diff --git a/en/images/story-url.png b/en/images/story-url.png
diff --git a/en/images/upload-image.png b/en/images/upload-image.png
diff --git a/en/images/wanted-final.png b/en/images/wanted-final.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -17,16 +17,13 @@ software: html-css-javascript
 version: 4
 last_tested: 2018-12-01
 steps:
-- title: Introduction
-- title: What you will need
-- title: Decide on a story
+- title: What you will make
 - title: Editing your story
   completion:
   - engaged
-- title: 'Challenge: make some changes'
 - title: Telling your story
-- title: Finding your own images
-- title: Uploading images
   completion:
   - internal
-- title: 'Challenge: keep going!'
+- title: Challenge
+  challenge: true
+- title: What can you do now?
diff --git a/en/step_1.md b/en/step_1.md
@@ -1,26 +1,11 @@
-## Introduction
+## What you will make
 
-In this project, you'll learn how to create your own webpage to tell a story, joke, or poem.
+Learn how to create your own webpage to tell a story, joke, or poem.
 
-### What you will make
+--- no-print ---
+Scroll down to see the punch line!
 
-Scroll down in the trinket to see the punch line!
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/tell-a-story-complete" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe>
 
-<div class="trinket">
-  <iframe src="https://trinket.io/embed/html/c8afdef912?outputOnly=true&start=result" width="600" height="450" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
-  </iframe>
-  <img src="images/story-final.png">
-</div>
+--- /no-print ---
 
-
-### What you will learn
-
-This project covers elements from the following strands of the [Raspberry Pi Digital Making Curriculum](https://rpf.io/curriculum){:target="_blank"}:
-
-+ [Design basic 2D and 3D assets](https://www.raspberrypi.org/curriculum/design/creator){:target="_blank"}.
-
-### Additional information for educators
-
-If you need to print this project, please use the [printer-friendly version](https://projects.raspberrypi.org/en/projects/tell-a-story/print){:target="_blank"} .
-
-Use the link in the footer to access the GitHub repository for this project, which contains all resources (including an example finished project) in the ‘en/resources’ folder.
diff --git a/en/step_2.md b/en/step_2.md
@@ -1,9 +1,39 @@
-## What you will need
+## Editing your story
 
-### Hardware
+--- task ---
+Before you get coding, you'll need to decide on a story. Think about the story you want to tell. It could be:
 
-+ A computer capable of accessing [trinket.io](https://trinket.io){:target="_blank"}
++ A famous story
++ A story you have made up
++ Something that has happened to you or someone you know
 
-### Software
+It doesn't even have to be a story. It could be a joke, a poem, or anything else you want!
+--- /task ---
 
-This project can be completed in a web browser using [trinket.io](https://trinket.io){:target="_blank"}.
+--- task ---
+
+Open the [starter project](https://editor.raspberrypi.org/en/projects/tell-a-story-starter){:target="_blank"}
+
+--- /task ---
+
+Webpage content goes in the `<body>` section of the `index.html` HTML document.
+
+--- task ---
+
+Change `My story` to the title of your story.
+
+--- /task ---
+
+--- task ---
+
+Change `Add your own text here!` to the first line of your story
+
+--- /task ---
+
+--- task ---
+
+Click **Run** to see your web page
+
+![A comic with the title 'Adventures in space' and a first panel containin a sun with the caption 'There was once a star'](images/codeed-starter.png)
+
+--- /task ---
diff --git a/en/step_3.md b/en/step_3.md
@@ -1,9 +1,96 @@
-## Decide on a story
+## Telling your story
 
-Before you get coding, you'll need to decide on a story. Think about the story you want to tell. It could be:
+Let's add a second part to your story.
 
-+ A famous story
-+ A story you have made up
-+ Something that has happened to you or someone you know
+--- task ---
+Go to line 15 of the code, and add in another set of `<div>` and `</div>` start and end tags. This will create a new box for the next part of your story.
 
-It doesn't even have to be a story. It could be a joke, a poem, or anything else you want!
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 15
+line_highlights: 15-17
+---
+<div>
+
+</div>
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Add the code for an image `<img>` tag:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 15
+line_highlights: 16
+---
+<div>
+<img src="">
+</div>
+--- /code ---
+
+--- /task ---
+
+--- task ---
+Click on the images tab and choose one of the images. 
+
+Make a note of the name of the image, for example `buildings.png` or `spaceship.png`.
+
+![Images tab highlghted to the left of the code editor pane](images/codeed-images.png)
+
+--- /task ---
+
+--- task ---
+
+Add the name of the image inside the `<img>` tag:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 15
+line_highlights: 16
+---
+<div>
+<img src="spaceship.png">
+</div>
+--- /code ---
+
+--- /task ---
+
+--- task ---
+Add a `<p>` paragraph tag inside your new `<div>` tag, and write the next part of your story:
+
+--- code ---
+---
+language: html
+line_numbers: true
+line_number_start: 15
+line_highlights: 17
+---
+<div>
+<img src="spaceship.png">
+<p>The star asked a friend to come and visit.</p>
+</div>
+--- /code ---
+
+--- /task ---
+
+--- task ---
+
+Press **Run** to see the next part of your story appear.
+
+![A comic with two panes, one contains a sun and one contains a rocket image. The next pane reads 'The star asked a friend to come and visit'.](images/codeed-part2.png)
+
+--- /task ---
+
+--- task ---
+Now, follow the same steps to add as many boxes as you need to finish your story.
+--- /task ---
diff --git a/en/step_4.md b/en/step_4.md
@@ -1,31 +1,56 @@
-## Editing your story
+## Challenge
 
-Let's start by editing the HTML content and CSS style of the story's webpage.
+--- challenge ---
 
-+ Open [this trinket](http://jumpto.cc/web-story){:target="_blank"}.
+Edit the CSS code to customise your webpage. 
 
-The project should look like this:
+--- task ---
+Click on the file `style.css`:
 
-![screenshot](images/story-starter.png)
+![A screenshot of the UI for the code editor with the file style.css highlighted](images/codeed-css.png)
 
-Webpage content goes in the `<body>` section of the `index.html` HTML document.
+--- /task ---
 
-+ Find the webpage content from line 7 onwards, inside `<body>` and `</body>` tags.
+--- task ---
+Find the style for the body, and change the font. 
 
-![screenshot](images/story-html.png)
+You can choose different fonts such as:
++ <span style="font-family: Arial;">Arial</span>
++ <span style="font-family: Impact;">Impact</span>
++ <span style="font-family: Tahoma;">Tahoma</span>
 
-+ See if you can work out which tags are used to create the different parts of the webpage.
+--- code ---
+---
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 3
+---
+body {
+  background-color: white;
+  font-family: Comic Sans MS;
+}
+--- /code ---
+--- /task ---
+
+--- task ---
+Change the background colour to a different colour:
 
---- collapse ---
+--- code ---
 ---
-title: Answer
+language: css
+line_numbers: true
+line_number_start: 1
+line_highlights: 2
 ---
+body {
+  background-color: white;
+  font-family: Comic Sans MS;
+}
+--- /code ---
 
-![screenshot](images/story-elements.png)
+Find more CSS colour names [here](http://jumpto.cc/colours){:target="_blank"}.
 
-+ `<h1>` is a __heading__. You can use the numbers 1 to 6 to create headings of different sizes.
-+ `<div>` is short for __division__, and is a way of grouping stuff together. In this webpage, you'll use it to group together all the stuff for each part of your story.
-+ `<img>` is an __image__.
-+ `<p>` is a __paragraph__ of text.
+--- /task ---
 
---- /collapse ---
+--- /challenge ---
diff --git a/en/step_5.md b/en/step_5.md
@@ -1,19 +1,18 @@
---- challenge ---
-## Challenge: make some changes
-Edit the HTML and CSS code to customise your webpage.
+## What can you do now?
 
-![screenshot](images/story-changes.png)
+If you are following the [HTML and CSS: Module 1](https://projects.raspberrypi.org/en/pathways/webdev-module-1) pathway, you can move on to the [Wanted](https://projects.raspberrypi.org/en/projects/wanted) project. In this project, you will learn how to make your own poster.
 
-The HTML content can be found in the `index.html` file, and the CSS style in the `style.css` file.
+--- print-only --- 
 
-![screenshot](images/story-files.png)
+![A wanted poster of a robot](images/wanted-final.png)
 
-You can also alter the colours used in the webpage, and you can use different fonts such as:
-+ <span style="font-family: Arial;">Arial</span>
-+ <span style="font-family: Comic Sans MS;">Comic Sans MS</span>
-+ <span style="font-family: Impact;">Impact</span>
-+ <span style="font-family: Tahoma;">Tahoma</span>
+--- /print-only ---
 
-Find more CSS colour names [here](http://jumpto.cc/colours){:target="_blank"}.
+--- no-print ---
 
---- /challenge ---
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/wanted-complete" width="600" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+</iframe>
+
+--- /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_6.md b/en/step_6.md