diff --git a/en/code/tell-a-story-starter/index.html b/en/code/tell-a-story-starter/index.html index ff6d3737..7d3136aa 100644 --- a/en/code/tell-a-story-starter/index.html +++ b/en/code/tell-a-story-starter/index.html @@ -1,18 +1,18 @@ - - - + + + - - -

My Story

- -
- -

It was a beautiful day...

-
- - + + +

My Story

+ +
+ +

Add your own text here!

+
+ + \ No newline at end of file diff --git a/en/images/codeed-css.png b/en/images/codeed-css.png new file mode 100644 index 00000000..23cd7409 Binary files /dev/null and b/en/images/codeed-css.png differ diff --git a/en/images/codeed-images.png b/en/images/codeed-images.png new file mode 100644 index 00000000..38eac63d Binary files /dev/null and b/en/images/codeed-images.png differ diff --git a/en/images/codeed-part2.png b/en/images/codeed-part2.png new file mode 100644 index 00000000..771a5430 Binary files /dev/null and b/en/images/codeed-part2.png differ diff --git a/en/images/codeed-starter.png b/en/images/codeed-starter.png new file mode 100644 index 00000000..dc58fc9a Binary files /dev/null and b/en/images/codeed-starter.png differ diff --git a/en/images/story-changes.png b/en/images/story-changes.png deleted file mode 100644 index 8ed9bec2..00000000 Binary files a/en/images/story-changes.png and /dev/null differ diff --git a/en/images/story-div.png b/en/images/story-div.png deleted file mode 100644 index e7d20e9c..00000000 Binary files a/en/images/story-div.png and /dev/null differ diff --git a/en/images/story-drag.png b/en/images/story-drag.png deleted file mode 100644 index 385888ec..00000000 Binary files a/en/images/story-drag.png and /dev/null differ diff --git a/en/images/story-elements.png b/en/images/story-elements.png deleted file mode 100644 index 67b39f42..00000000 Binary files a/en/images/story-elements.png and /dev/null differ diff --git a/en/images/story-files.png b/en/images/story-files.png deleted file mode 100644 index 0a3cf7ad..00000000 Binary files a/en/images/story-files.png and /dev/null differ diff --git a/en/images/story-final.png b/en/images/story-final.png deleted file mode 100644 index ee335986..00000000 Binary files a/en/images/story-final.png and /dev/null differ diff --git a/en/images/story-html.png b/en/images/story-html.png deleted file mode 100644 index 1db7e585..00000000 Binary files a/en/images/story-html.png and /dev/null differ diff --git a/en/images/story-image-name-add.png b/en/images/story-image-name-add.png deleted file mode 100644 index cd8a9034..00000000 Binary files a/en/images/story-image-name-add.png and /dev/null differ diff --git a/en/images/story-image-name.png b/en/images/story-image-name.png deleted file mode 100644 index 505b40da..00000000 Binary files a/en/images/story-image-name.png and /dev/null differ diff --git a/en/images/story-image.png b/en/images/story-image.png deleted file mode 100644 index 06cd1169..00000000 Binary files a/en/images/story-image.png and /dev/null differ diff --git a/en/images/story-img-tag.png b/en/images/story-img-tag.png deleted file mode 100644 index 71b16f1e..00000000 Binary files a/en/images/story-img-tag.png and /dev/null differ diff --git a/en/images/story-paragraph.png b/en/images/story-paragraph.png deleted file mode 100644 index fa61aeba..00000000 Binary files a/en/images/story-paragraph.png and /dev/null differ diff --git a/en/images/story-see-images.png b/en/images/story-see-images.png deleted file mode 100644 index ae1ab059..00000000 Binary files a/en/images/story-see-images.png and /dev/null differ diff --git a/en/images/story-starter.png b/en/images/story-starter.png deleted file mode 100644 index 0ff51f74..00000000 Binary files a/en/images/story-starter.png and /dev/null differ diff --git a/en/images/story-upload.png b/en/images/story-upload.png deleted file mode 100644 index 4462e32f..00000000 Binary files a/en/images/story-upload.png and /dev/null differ diff --git a/en/images/story-url.png b/en/images/story-url.png deleted file mode 100644 index 1fd02a22..00000000 Binary files a/en/images/story-url.png and /dev/null differ diff --git a/en/images/upload-image.png b/en/images/upload-image.png deleted file mode 100644 index a25651d9..00000000 Binary files a/en/images/upload-image.png and /dev/null differ diff --git a/en/images/wanted-final.png b/en/images/wanted-final.png new file mode 100644 index 00000000..c8384c04 Binary files /dev/null and b/en/images/wanted-final.png differ diff --git a/en/meta.yml b/en/meta.yml index 20d22fd5..d3326d1f 100644 --- 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 index bc44aab1..d751139b 100644 --- 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! + -
- - -
+--- /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 index 88d4ebf5..141a3f61 100644 --- 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 `` 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 --- \ No newline at end of file diff --git a/en/step_3.md b/en/step_3.md index 392a4056..d5d91e0a 100644 --- 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 `
` and `
` 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 +--- +
+ +
+--- /code --- + +--- /task --- + +--- task --- + +Add the code for an image `` tag: + +--- code --- +--- +language: html +line_numbers: true +line_number_start: 15 +line_highlights: 16 +--- +
+ +
+--- /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 `` tag: + +--- code --- +--- +language: html +line_numbers: true +line_number_start: 15 +line_highlights: 16 +--- +
+ +
+--- /code --- + +--- /task --- + +--- task --- +Add a `

` paragraph tag inside your new `

` tag, and write the next part of your story: + +--- code --- +--- +language: html +line_numbers: true +line_number_start: 15 +line_highlights: 17 +--- +
+ +

The star asked a friend to come and visit.

+
+--- /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 --- \ No newline at end of file diff --git a/en/step_4.md b/en/step_4.md index cfe18648..bdae21e8 100644 --- 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 `` section of the `index.html` HTML document. +--- /task --- -+ Find the webpage content from line 7 onwards, inside `` and `` tags. +--- task --- +Find the style for the body, and change the font. -![screenshot](images/story-html.png) +You can choose different fonts such as: ++ Arial ++ Impact ++ Tahoma -+ 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"}. -+ `

` is a __heading__. You can use the numbers 1 to 6 to create headings of different sizes. -+ `
` 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. -+ `` is an __image__. -+ `

` is a __paragraph__ of text. +--- /task --- ---- /collapse --- +--- /challenge --- diff --git a/en/step_5.md b/en/step_5.md index 6cfb2493..de2876cb 100644 --- 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: -+ Arial -+ Comic Sans MS -+ Impact -+ Tahoma +--- /print-only --- -Find more CSS colour names [here](http://jumpto.cc/colours){:target="_blank"}. +--- no-print --- ---- /challenge --- + + +--- /no-print --- + +Or, why not try out another [HTML](https://projects.raspberrypi.org/en/projects?software%5B%5D=html-css-javascript) project. \ No newline at end of file diff --git a/en/step_6.md b/en/step_6.md deleted file mode 100644 index 5ecfe1b7..00000000 --- a/en/step_6.md +++ /dev/null @@ -1,45 +0,0 @@ -## Telling your story - -Let's add a second part to your story. - -+ Go to line 15 of the code, and add in another set of `

` and `
` start and end tags. This will create a new box for the next part of your story. - -![screenshot](images/story-div.png) - -+ Add a paragraph of text inside your new `
` tag: - -```html -

More text here!

-``` - -![screenshot](images/story-paragraph.png) - -+ You can display an image in your new box by adding this code inside your `
` tag: - -```html - -``` - -![screenshot](images/story-img-tag.png) - -Notice that `` tags are a bit different to other tags: they don't have an end tag. - -+ To get an image to show up, you need to add the **source** (`src`) of the image inside the speech marks. - -Click the image icon to see the images available for your story. - -![screenshot](images/story-see-images.png) - -+ Decide which image you want to add and remember its name, for example `buildings.png`. - -+ Click on `index.html` to get back to your code. - -![screenshot](images/story-image-name.png) - -+ Add the name of the image between the speech marks in your `` tag. - -```html - -``` - -![screenshot](images/story-image-name-add.png) diff --git a/en/step_7.md b/en/step_7.md deleted file mode 100644 index a0af5e99..00000000 --- a/en/step_7.md +++ /dev/null @@ -1,15 +0,0 @@ -## Finding your own images - -Let's find an image on the web to add to your story. - -+ Go to [this page](http://jumpto.cc/html-images){:target="_blank"}, and find an image that you want to include in your story. - -+ Right-click the image, and click **Copy Image URL** (or **Copy Image Address**, depending on the computer you are using). The URL is the address of the image. - -![screenshot](images/story-url.png) - -+ Go back to your `index.html` page. - -+ Paste the URL between the speech marks in your `` tag. You should see your image appear! - -![screenshot](images/story-image.png) diff --git a/en/step_8.md b/en/step_8.md deleted file mode 100644 index d12c2b3a..00000000 --- a/en/step_8.md +++ /dev/null @@ -1,17 +0,0 @@ -## Uploading images - -**If you have a Trinket account**, you can also upload your own images to your webpage. - -+ Click on the image icon at the top of your trinket, and then click **Add Image**. - -![screenshot](images/story-upload.png) - -+ Click the **Upload** button, then find the image you want to use on your computer and drag it into the box. Alternatively, use the button to select it. - -![Upload](images/upload-image.png) - -+ Then just add the name of your new image between the speech marks in your `` tag, like this: - -```html - -``` diff --git a/en/step_9.md b/en/step_9.md deleted file mode 100644 index 96237fc7..00000000 --- a/en/step_9.md +++ /dev/null @@ -1,8 +0,0 @@ ---- challenge --- -## Challenge: keep going! - -Use what you've learnt in this project to finish telling your story! Here's an example: - -![screenshot](images/story-final.png) - ---- /challenge ---