Merge pull request #77 from raspberrypilearning/draft

Draft
raspberrypilearning · Apr 2, 2024 · b925585 · b925585
2 parents aa31697 + b018e2b
commit b925585
Show file tree

Hide file tree

Showing 15 changed files with 301 additions and 173 deletions.
diff --git a/en/images/birthday-card-html.png b/en/images/birthday-card-html.png
diff --git a/en/images/birthday-card-outside.png b/en/images/birthday-card-outside.png
diff --git a/en/images/birthday-card-size.png b/en/images/birthday-card-size.png
diff --git a/en/images/birthday-css-link.png b/en/images/birthday-css-link.png
diff --git a/en/images/birthday-css-tab.png b/en/images/birthday-css-tab.png
diff --git a/en/images/birthday-edit-css.png b/en/images/birthday-edit-css.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -18,7 +18,6 @@ version: 4
 last_tested: 2017-01-01
 steps:
 - title: Introduction
-- title: What you will need
 - title: What is HTML?
 - title: 'Challenge: add another paragraph'
 - title: What is CSS?

diff --git a/en/step_1.md b/en/step_1.md
@@ -6,17 +6,7 @@ In this project, you'll be introduced to HTML and CSS by learning how to make yo
 
 Click the button to open the birthday card:
 
-<div class="trinket">
-  <iframe src="https://trinket.io/embed/html/c3d52cf65c?outputOnly=true&start=result" width="600" height="450" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
-  </iframe>
-  <img src="images/birthday-final.png">
-</div>
-
-### 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"}.
+<iframe src="https://editor.raspberrypi.org/en/embed/viewer/happy-birthday-complete" width="600" height="450" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen> </iframe>
 
 ### Additional information for educators
 

diff --git a/en/step_2.md b/en/step_2.md
@@ -1,9 +1,72 @@
-## What you will need
+## What is HTML?
 
-### Hardware
+HTML stands for **Hypertext Markup Language**, the language used to make webpages. Let's have a look at an example!
 
-+ A computer capable of accessing [trinket.io](https://trinket.io){:target="_blank"}
+--- task ---
 
-### Software
+Open the [Happy Birthday starter project](https://editor.raspberrypi.org/en/projects/happy-birthday-starter){:target="_blank"}.
 
-This project can be completed in a web browser using [trinket.io](https://trinket.io){:target="_blank"}.
+--- /task ---
+
+--- task ---
+
+The code that you can see on the left is HTML. When you click **Run**, you can see the webpage that the HTML code has made on the right.
+
+--- /task ---
+
+
+HTML uses **tags** to build webpages. Look for this HTML code on line 8 of your code:
+
+```html
+<p>Hi. My name is Andy.</p>
+```
+
+`<p>` is an example of a tag, and is short for **paragraph**. You can start a paragraph with `<p>`, and end a paragraph with `</p>`.
+
+--- collapse ---
+---
+title: Can you spot any other tags?
+---
+One other tag you might have spotted is `<b>`, which stands for __bold__:
+
+```html
+<b>running</b>
+```
+
+Here are some more:
+
++ `<html>` and `</html>` mark the start and end of the HTML document
++ `<head>` and `</head>` is where stuff like CSS goes (we'll get to that later)
++ `<body>` and `</body>` is where your website content goes
+
+![screenshot](images/birthday-head-body.png)
+
+--- /collapse ---
+
+--- task ---
+
+Make a change to one of the paragraphs of text in the HTML file (on the left). Click **Run**, and you should see your webpage change (on the right)!
+
+--- code ---
+---
+language: html
+filename: index.html
+line_numbers: true
+line_number_start: 7 
+line_highlights: 8
+---
+  <body>
+    <p>Hi. My name is Nic.</p>
+    <p>I like <b>running</b> and <i>riding my bike</i>.</p>
+  </body>
+--- /code ---
+
+--- /task ---
+
+If you have made a mistake and want to undo all of your changes, you can press and hold the **Ctrl**, then press the **z** key.
+
+### You need an account to save your projects!
+
+If you have a Raspberry Pi account, the easiest way to save your webpage is to click the **log in to save** button on the top right of the project. This will save a copy of the on your profile.
+
+If you do not yet have a Raspberry Pi account you can create one at [my.raspberrypi.org](https://my.raspberrypi.org/signup).
diff --git a/en/step_3.md b/en/step_3.md
@@ -1,63 +1,19 @@
-## What is HTML?
+--- challenge ---
+## Challenge: add another paragraph
+- Can you add a third paragraph of text to your webpage, below the other two?
 
-HTML stands for **Hypertext Markup Language**, the language used to make webpages. Let's have a look at an example!
+Remember that your new paragraph should start with a `<p>` tag, and end with `</p>` tag.
 
-You'll be using a website called trinket.io to write HTML code.
+Here's how your webpage might look:
 
-+ Open [this trinket](http://jumpto.cc/web-intro){:target="_blank"}.
 
-The project should look like this:
+<div style="border: 1px solid black; font-family: Arial;">
+<p>Hi. My name is Franky.</p>
+<p>I like <b>running</b> and <i>riding my bike</i>.</p>
+<p>My birthday is on the 30th of June.</p>
+</div>
 
-![screenshot](images/birthday-starter.png)
 
-The code that you can see on the left is HTML. On the right of the trinket, you can see the webpage that the HTML code has made.
+Can you add **bold** and <u>underlined</u> text to your new paragraph? Use `<u>` and `</u>` tags for underlined text.
 
-HTML uses **tags** to build webpages. Look for this HTML code on line 8 of your code:
-
-```html
-<p>Hi. My name is Andy.</p>
-```
-
-`<p>` is an example of a tag, and is short for **paragraph**. You can start a paragraph with `<p>`, and end a paragraph with `</p>`.
-
-+ Can you spot any other tags?
-
---- collapse ---
----
-title: Answer
----
-One other tag you might have spotted is `<b>`, which stands for __bold__:
-
-```html
-<b>running</b>
-```
-
-Here are some more:
-
-+ `<html>` and `</html>` mark the start and end of the HTML document
-+ `<head>` and `</head>` is where stuff like CSS goes (we'll get to that later)
-+ `<body>` and `</body>` is where your website content goes
-
-![screenshot](images/birthday-head-body.png)
-
---- /collapse ---
-
-+ Make a change to one of the paragraphs of text in the HTML file (on the left). Click **Run**, and you should see your webpage change (on the right)!
-
-![screenshot](images/birthday-edit-html.png)
-
-+ If you have made a mistake and want to undo all of your changes, you can click the **menu** button and then click **Reset**.
-
-![screenshot](images/birthday-reset.png)
-
-To undo just the last thing you did, you can press the `Ctrl` and `z` keys together.
-
-### You don't need a Trinket account to save your projects!
-
-If you don't have a Trinket account, click the **down** arrow and then click **Link**. This will give you a link that you can save and come back to later. You'll need to do this every time you make changes, as the link will change!
-
-![screenshot](images/birthday-link.png)
-
-If you have a Trinket account, the easiest way to save your webpage is to click the **Remix** button on the top of the trinket. This will save a copy of the trinket on your profile.
-
-![screenshot](images/birthday-remix.png)
+--- /challenge ---
diff --git a/en/step_4.md b/en/step_4.md
@@ -1,13 +1,69 @@
---- challenge ---
-## Challenge: add another paragraph
-- Can you add a third paragraph of text to your webpage, below the other two?
+## What is CSS?
 
-Remember that your new paragraph should start with a `<p>` tag, and end with `</p>` tag.
+CSS stands for **Cascading Style Sheets**, and it is a language used to style webpages and make them look nice.
 
-Here's how your webpage might look:
+This code links your webpage to a CSS file — see if you can find it in the `<head>` of the HTML document:
 
-![screenshot](images/birthday-paragraph.png)
+--- code ---
+---
+language: html
+filename: index.html
+line_numbers: true
+line_number_start: 3
+line_highlights: 4
+---
+  <head>
+    <link rel="stylesheet" href="style.css">
+  </head>
+--- /code ---
 
-Can you add **bold** and <u>underlined</u> text to your new paragraph? Use `<u>` and `</u>` tags for underlined text.
+CSS lists all of the **properties** for a particular tag.
 
---- /challenge ---
+--- task ---
+
+Click on the `style.css` file on the left to see the CSS code for your webpage.
+
+![screenshot](images/birthday-css-tab.png)
+
+--- /task ---
+
+--- task ---
+
+Find this code:
+
+--- code ---
+---
+language: css
+filename: style.css
+line_numbers: true
+line_number_start: 4
+line_highlights: 
+---
+p {
+	color: black;
+}
+--- /code ---
+
+--- /task ---
+
+
+This CSS code determines a property for paragraphs (`p`), which says that the text colour should be black. Notice the American spelling: 'color'.
+
+--- task ---
+
+Change the word 'black' in the CSS code to 'blue'. You should see the text colour of all paragraphs change to blue, when you click on **Run**.
+
+--- code ---
+---
+language: css
+filename: style.css.html
+line_numbers: true
+line_number_start: 4
+line_highlights: 5
+---
+p {
+  color: blue;  
+}
+--- /code ---
+
+--- /task ---
diff --git a/en/step_5.md b/en/step_5.md
@@ -1,27 +1,8 @@
-## What is CSS?
+--- challenge ---
+## Challenge: add more styles
 
-CSS stands for **Cascading Style Sheets**, and it is a language used to style webpages and make them look nice.
++ Can you make the paragraphs of text orange?
 
-+ This code links your webpage to a CSS file — see if you can find it in the `<head>` of the HTML document:
++ Can you make the background grey by changing the `body` property?
 
-![screenshot](images/birthday-css-link.png)
-
-CSS lists all of the **properties** for a particular tag.
-
-+ Click on the `style.css` tab to see the CSS code for your webpage.
-
-	![screenshot](images/birthday-css-tab.png)
-
-+ Find this code:
-
-```html
-p {
-	color: black;
-}
-```
-
-This CSS code determines a property for paragraphs (`p`), which says that the text colour should be black. Notice the American spelling: 'color'.
-
-+ Change the word 'black' in the CSS code to 'blue'. You should see the text colour of all paragraphs change to blue.
-
-![screenshot](images/birthday-edit-css.png)
+--- /challenge ---