raspberrypilearning · ninaszymor · Jun 16, 2020 · Jun 16, 2020 · Jun 16, 2020 · Jun 16, 2020
diff --git a/af-ZA/images/AddressBarURL.png b/af-ZA/images/AddressBarURL.png
diff --git a/af-ZA/images/EditFilename.png b/af-ZA/images/EditFilename.png
diff --git a/af-ZA/images/EmbedGoogleMap.png b/af-ZA/images/EmbedGoogleMap.png
diff --git a/af-ZA/images/EmbedYouTube.png b/af-ZA/images/EmbedYouTube.png
diff --git a/af-ZA/images/EmbedYouTube2.png b/af-ZA/images/EmbedYouTube2.png
diff --git a/af-ZA/images/EmbeddedGoogleMapCode.png b/af-ZA/images/EmbeddedGoogleMapCode.png
diff --git a/af-ZA/images/MyTrinketsMenuWide.png b/af-ZA/images/MyTrinketsMenuWide.png
diff --git a/af-ZA/images/OrderedList.png b/af-ZA/images/OrderedList.png
diff --git a/af-ZA/images/UnorderedList.png b/af-ZA/images/UnorderedList.png
diff --git a/af-ZA/images/badge-footer-image-html-beginner.png b/af-ZA/images/badge-footer-image-html-beginner.png
diff --git a/af-ZA/images/banner.png b/af-ZA/images/banner.png
diff --git a/af-ZA/images/banner.svg b/af-ZA/images/banner.svg
diff --git a/af-ZA/images/egBlankPageCodePasted.png b/af-ZA/images/egBlankPageCodePasted.png
diff --git a/af-ZA/images/egBlankPageSelectAll.png b/af-ZA/images/egBlankPageSelectAll.png
diff --git a/af-ZA/images/egCoolMenuBar.png b/af-ZA/images/egCoolMenuBar.png
diff --git a/af-ZA/images/egCssColorsFonts.png b/af-ZA/images/egCssColorsFonts.png
diff --git a/af-ZA/images/egFirstCSSbluebg.png b/af-ZA/images/egFirstCSSbluebg.png
diff --git a/af-ZA/images/egFirstHtmlCode.png b/af-ZA/images/egFirstHtmlCode.png
diff --git a/af-ZA/images/egFirstTags.png b/af-ZA/images/egFirstTags.png
diff --git a/af-ZA/images/egImgCode.png b/af-ZA/images/egImgCode.png
diff --git a/af-ZA/images/egImgCodeBird.png b/af-ZA/images/egImgCodeBird.png
diff --git a/af-ZA/images/egImgCodeTito.png b/af-ZA/images/egImgCodeTito.png
diff --git a/af-ZA/images/egLinkTagWithURL.png b/af-ZA/images/egLinkTagWithURL.png
diff --git a/af-ZA/images/egListOfPageLinks.png b/af-ZA/images/egListOfPageLinks.png
diff --git a/af-ZA/images/egLocalFileWindowTitle.png b/af-ZA/images/egLocalFileWindowTitle.png
diff --git a/af-ZA/images/egMenuBarFirstStyle.png b/af-ZA/images/egMenuBarFirstStyle.png
diff --git a/af-ZA/images/egMenuBarFullStyles_result.png b/af-ZA/images/egMenuBarFullStyles_result.png
diff --git a/af-ZA/images/egMenuBarInline.png b/af-ZA/images/egMenuBarInline.png
diff --git a/af-ZA/images/egMenuBarMoreStyle.png b/af-ZA/images/egMenuBarMoreStyle.png
diff --git a/af-ZA/images/egMenuBarNoBullets.png b/af-ZA/images/egMenuBarNoBullets.png
diff --git a/af-ZA/images/egMenuBarNoUnderline.png b/af-ZA/images/egMenuBarNoUnderline.png
diff --git a/af-ZA/images/egMenuBarOnPage.png b/af-ZA/images/egMenuBarOnPage.png
diff --git a/af-ZA/images/egNavLinksAtTop.png b/af-ZA/images/egNavLinksAtTop.png
diff --git a/af-ZA/images/egOrderedList.png b/af-ZA/images/egOrderedList.png
diff --git a/af-ZA/images/egParagraphLink.png b/af-ZA/images/egParagraphLink.png
diff --git a/af-ZA/images/egSelectedWhoops.png b/af-ZA/images/egSelectedWhoops.png
diff --git a/af-ZA/images/egSelectedYay.png b/af-ZA/images/egSelectedYay.png
diff --git a/af-ZA/images/egSelectedYayWoops.png b/af-ZA/images/egSelectedYayWoops.png
diff --git a/af-ZA/images/egTableResult.png b/af-ZA/images/egTableResult.png
diff --git a/af-ZA/images/egUnorderedList.png b/af-ZA/images/egUnorderedList.png
diff --git a/af-ZA/images/tktDownloadMenuCircled.png b/af-ZA/images/tktDownloadMenuCircled.png
diff --git a/af-ZA/images/tktHTMLStartingPoint.png b/af-ZA/images/tktHTMLStartingPoint.png
diff --git a/af-ZA/images/tktImageIconArrow.png b/af-ZA/images/tktImageIconArrow.png
diff --git a/af-ZA/images/tktMenuButton.png b/af-ZA/images/tktMenuButton.png
diff --git a/af-ZA/images/tktNewFileArrows.png b/af-ZA/images/tktNewFileArrows.png
diff --git a/af-ZA/images/tktRemixButtonArrow.png b/af-ZA/images/tktRemixButtonArrow.png
diff --git a/af-ZA/images/tktRemixedSmall.png b/af-ZA/images/tktRemixedSmall.png
diff --git a/af-ZA/images/tktScrollTabIcons.png b/af-ZA/images/tktScrollTabIcons.png
diff --git a/af-ZA/images/tktUploadImages.png b/af-ZA/images/tktUploadImages.png
diff --git a/af-ZA/meta.yml b/af-ZA/meta.yml
@@ -0,0 +1,44 @@
+---
+title: Bird watch website 1.0
+hero_image: images/banner.png
+description: Learn to make a website
+theme: navy #possible values: blue, green, navy, orange, red, turquoise, violet, yellow
+duration: 3
+listed: true
+ingredient: false
+copyedit: true
+curriculum: ''
+interests: ''
+technologies: html-css-javascript
+site_areas: coderdojo, projects
+hardware: ''
+software: html-css-javascript
+version: 3.0.0
+last_tested: 2018-05-01
+steps:
+  - 
+    title: Introduction
+  - 
+    title: Getting set up
+  - 
+    title: Your first webpage!
+  - 
+    title: Controlling how it looks
+  - 
+    title: Adding pictures
+  - 
+    title: Adding a map or video
+  - 
+    title: Making a list
+  - 
+    title: Creating links
+  - 
+    title: Adding more pages
+  - 
+    title: Navigating your website
+  - 
+    title: Making a menu bar
+  - 
+    title: Styling the menu bar
+  - 
+    title: Adding a table
diff --git a/af-ZA/oldstep2.md b/af-ZA/oldstep2.md
@@ -0,0 +1,9 @@
+## What you will need
+
+### Hardware
+
++ A computer capable of accessing [trinket.io](https://trinket.io){:target="_blank"}
+
+### Software
+
+This project can be completed in a web browser using [trinket.io](https://trinket.io){:target="_blank"}.
diff --git a/af-ZA/step_1.md b/af-ZA/step_1.md
@@ -0,0 +1,40 @@
+## Introduction
+
+Learn how to code your first website!
+
+### What you will make
+
+Build a website like the one in the trinket below.
+
+<div class="trinket">
+  <iframe src="https://trinket.io/embed/html/7bb7dafb6e?outputOnly=true&start=result" width="600" height="505" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen>
+  </iframe>
+</div>
+
+--- collapse ---
+---
+title: What you will learn
+---
+
+- Using an online editor to create a website made up of HTML files and a CSS file
+- Building a HTML website that has headings, paragraph text, lists, and images
+- Using CSS code to control the look of your website, including designing a simple menu bar and changing colours, backgrounds, and borders
+- Linking pages to each other, and linking to other websites
+- Creating a table that includes headings and multiple rows
+
+--- /collapse ---
+
+--- collapse ---
+---
+title: What you will need
+---
+
+### Hardware
+
++ A computer capable of accessing [trinket.io](https://trinket.io){:target="_blank"}
+
+### Software
+
++ This project can be completed in a web browser using [trinket.io](https://trinket.io){:target="_blank"}.
+
+--- /collapse ---
diff --git a/af-ZA/step_10.md b/af-ZA/step_10.md
@@ -0,0 +1,65 @@
+## Navigating your website
+
+Many websites have a **navigation** menu to help visitors move between pages. Now that you've got a bunch of pages, a homepage, and links to each page, let's move the list of links to a navigation section at the top of every page.
+
+![Example of a web page with navigation links at the top](images/egNavLinksAtTop.png)
+
+- Find the code for your list of links that you created in the previous step.
+
+- Just before the opening `<ul>` tag, press **Enter** to create a new blank line, then on the new line type the following tag: `<nav>`. Trinket automatically adds the closing tag right after, but you can delete that — it's not in the right place.
+
+- Just **after** the closing `</ul>` tag, press **Enter** to create a new blank line, and type in the closing tag `</nav>` there.
+
+- Now select your entire `<nav>` section and list by clicking just before the opening `<nav>` tag and dragging the mouse all the way down to just after the closing `</nav>` tag, so that all of the text including the opening and closing tags becomes highlighted. Make sure all of the **angle brackets** `<` and `>` at the start and end are highlighted as well!
+
+![Text is not fully selected](images/egSelectedWhoops.png) ![Fully selected text](images/egSelectedYay.png)
+
+- You are going to **cut** this time instead of copying. Hold down the <kbd>Ctrl</kbd> (or <kbd>cmd</kbd>) key, and while holding it, press the <kbd>X</kbd> key. The highlighted code will disappear, but don't panic!
+
+- At the top of the file, click in the space between the `<header> </header>` tags. Make sure you see the cursor flashing there. Now paste in the code by pressing <kbd>Ctrl</kbd> (or <kbd>cmd</kbd>) and <kbd>V</kbd> as usual. The code should look something like this:
+
+```html
+    <header>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="birds.html">Protected Birds</a></li>
+                <li><a href="conservation.html">Conservation</a></li>
+                <li><a href="sanctuaries.html">Bird Sanctuaries</a></li>
+            </ul>
+        </nav>
+    </header>
+```
+
+--- collapse ---
+---
+title: Undo!
+---
+
+If you make a mistake, you can **undo** it by pressing <kbd>Ctrl</kbd> (or <kbd>cmd</kbd>) and <kbd>Z</kbd> together. You can usually press this key combination a few times to undo the last few changes. This is another handy keyboard shortcut that you can use in many programs!
+
+--- /collapse ---
+
+- Try out your links to make sure they are still working.
+
+--- challenge ---
+
+## Challenge: navigation menus for all pages
+
+- Put this code section into the header section of each HTML file that you've created. This will make the navigation menu appear at the top of every page on your website.
+
+ --- hints ---
+
+ --- hint ---
+
+Select the entire `<nav>` section like you did before, and press the <kbd>Ctrl</kbd> (or <kbd>cmd</kbd>) and <kbd>C</kbd> keys together to copy it.
+
+Then, in each of your `.html` files, click inside the `<header> </header>` section and paste the code exactly like you did earlier.
+
+ --- /hint ---
+
+ --- /hints ---
+
+Now you will be able to click the links no matter which page you are on.
+
+--- /challenge ---
diff --git a/af-ZA/step_11.md b/af-ZA/step_11.md
@@ -0,0 +1,75 @@
+## Making a menu bar
+
+On this card you will see how you can transform your navigation menu into a cool-looking menu bar, just by adding more CSS rules in the style sheet.
+
+![Example of a menu bar](images/egCoolMenuBar.png)
+
+- Go to the style sheet file in the `styles.css` tab. Click **below** a closing curly brace `}`, and press **Enter** to create a new blank line. Add the following CSS rule:
+
+```css
+    nav ul {
+        background-color: tomato;
+    }
+```
+
+Notice how you used two selectors instead of one? If you used the `ul` selector on its own, the rule would affect all unordered lists on your website. Adding the `nav` selector as well makes it only apply to lists that are in between `nav` tags.
+
+![List with red background](images/egMenuBarFirstStyle.png)
+
+Let's get rid of the bullet points. Those are the dots in front of each list item.
+
+- Add the following to the `styles.css` file. Again, type it on a new line after a `}` so it's not inside any other block of rules.
+
+```css
+    nav ul li {
+        list-style-type: none;
+    }
+```
+
+Notice this set of rules has three selectors: it selects all `li` elements that are in a `ul` list which is inside a `nav` section. Phew!
+
+![List with bullet points removed](images/egMenuBarNoBullets.png)
+
+Now let's make the list horizontal (across) instead of vertical (down).
+
+- Inside the new CSS rule you just created, add the following line: `display: inline;`.
+
+![](images/egMenuBarInline.png)
+
+- The menu items are now all squashed together, so let's also add the properties `margin-right` and `margin-left` to space them out a bit. The block of CSS code should look like this now:
+
+```css
+    nav ul li {
+        list-style-type: none;
+        display: inline;
+        margin-right: 10px;
+        margin-left: 10px;
+    }
+```
+
+Remember: `10px` means ten pixels.
+
+How about making the menu change to tell you which page you are on? This part won't be in the style sheet.
+
+- Start with the homepage. Go to the `index.html` file. In the list of menu links, remove the link tags before and after the word `Home`, so that the list item for the homepage is just text in between `<li> </li>` tags, like this: `<li>Home</li>`.
+
+- Now go to each of your other files, and do the same thing, each time removing the link tags for the page you are editing. So, for example, on the `birds.html` file, I've removed the link tags in the `Protected Birds` list item:
+
+```html
+    <header>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li>Protected Birds</li>
+                <li><a href="conservation.html">Conservation</a></li>
+                <li><a href="sanctuaries.html">Bird Sanctuaries</a></li>
+            </ul>
+        </nav>
+    </header>
+```
+
+- Explore your pages by clicking the links. See how the menu bar shows the page you're on as plain text instead of a link?
+
+![Example of menu bar highlighting current page](images/egMenuBarOnPage.png)
+
+On the next card you'll learn even more CSS tricks to make the menu bar look awesome.
diff --git a/af-ZA/step_12.md b/af-ZA/step_12.md
@@ -0,0 +1,59 @@
+## Styling the menu bar
+
+With CSS, the possibilities for making your menu bar look great are endless.
+
+- Move to the `styles.css` file again — the place where the cool stuff happens!
+
+- Find your `nav ul` selector, and add more rules so that it looks like this:
+
+```css
+  nav ul {
+    background-color: tomato;
+    border-style: solid;
+    border-color: MediumVioletRed;
+    border-width: 2px;
+    padding: 10px;
+  }
+```
+
+The `padding` property adds space. Can you work out what each of the other properties do? Try experimenting with different colours and numbers of pixels.
+
+![Menu bar with borders and padding added](images/egMenuBarMoreStyle.png)
+
+- To get rid of the underlining of the links, add the following code on a new line after the closing curly brace `}` for the `nav ul li` rules. You could put it after any `}`, but it's a good idea to keep related stuff together so it's easier to find!
+
+```css
+  nav ul li a {
+      text-decoration: none;
+  }
+```
+
+The above rule applies to links `<a>` inside list items `<li>` in an unordered list `<ul>` inside a navigation section `<nav>`. Wow, that's four selectors!
+
+![Menu bar with link underlining removed](images/egMenuBarNoUnderline.png)
+
+Remember how you removed the link tags from some list items in the `<nav>` so you can easily see what page you're on? Why not also change the text colour of those navigation list items which are not links!
+
+- Find your `nav ul li` selector, and **inside** the curly braces add the line:
+
+```css
+  color: PapayaWhip;
+```
+
+You can choose any colour you like!
+
+You can add the `color` property to the `nav ul li a` rule as well if you want the menu links to be a different colour from other links on your website.
+
+- How about some rounded corners for your menu? Try adding the following code to the `nav ul` rule to see what happens: `border-radius: 10px;`.
+
+The `border-radius` property is a really easy way to make anything look cooler!
+
+![Webpage with rounded corners on the menu bar and on a picture](images/egMenuBarFullStyles_result.png)
+
+--- challenge ---
+
+## Challenge: make your pictures have rounded corners
+
+- In your style sheet, create a new set of rules for pictures using the `img` selector, and add in a `border-radius` rule there.
+
+--- /challenge ---
diff --git a/af-ZA/step_13.md b/af-ZA/step_13.md
@@ -0,0 +1,93 @@
+## Adding a table
+
+Sometimes it can be useful to show information in a table. For example, you might want to list member information on a website for a local sports club or school, or information about your top ten favourite songs.
+
+A table is a grid made up of **rows** and **columns**. Most tables also include titles at the top of each column, called the **header**. Here's an example:
+
+![Example of information in a table](images/egTableResult.png)
+
+- Go to the file `page_with_table.html`. There you will see a bunch of code in between `<table> </table>` tags.
+
+- Select all of the code from the start of the `<table>` tag to the end of the closing `</table>` tag and copy it. Then go to one of your files where you would like to put a table, and paste in the code.
+
+At the moment your table is empty.
+
+- Have a go at filling your table with anything you like! Simply put text in between the `<td> </td>` tags and in between the `<th> </th>` tags. You can add more tags if you need them.
+
+--- collapse ---
+---
+title: Example code
+---
+
+The HTML code for the table shown above looks like this:
+
+```html
+  <table>
+    <tr>
+      <th>Name</th>
+      <th>Location</th>
+      <th>Birds found there</th>
+    </tr>
+    <tr>
+      <td>Skellig Michael</td>
+      <td>Island off coast of Kerry</td>
+      <td>Puffins</td>
+    </tr>
+    <tr>
+      <td>Bird Island</td>
+      <td>Strangford Lough</td>
+      <td>Cormorants</td>
+    </tr>
+    <tr>
+      <td>Burren Birds of Prey Centre</td>
+      <td>County Clare</td>
+      <td>Various birds of prey including eagles, hawks, owls and falcons</td>
+    </tr>
+  </table>
+```
+
+--- /collapse ---
+
+To add another **row**, add another set of `<tr> </tr>` tags. In between them, you put the same number of **data** items with `<td> </td>` tags as you have in the other rows.
+
+To add another **column**, add an extra **data** item with a set of `<td> </td>` tags to **every** row. Also add an extra **header** item to the first row, using `<th> </th>` tags.
+
+--- collapse ---
+---
+title: How does it work?
+---
+
+Let's have a look at all those tags. It's a bit like the code for a list (remember `<ul>` and `<ol>`) but with more levels.
+
+Each pair of `<tr> </tr>` tags is a row, so everything in between them will be displayed on one line.
+
+The first row contains `<th> </th>` tags. These are used for the headers, so the column titles go in between them. There is one pair for each column you have in your table.
+
+The `<td> </td>` tags define what's called table data, and that's what goes in all the other rows. These are similar to the list item tags `<li> </li>`: everything in between them is one item in your table row.
+
+--- /collapse ---
+
+- If you look at the end of the `styles.css` file, you will see the CSS code that describes how the table should look. You don't have to understand all of it! But you can experiment with changing the text, border, and background colours to design your own style.
+
+```css
+  table, th, td {
+    border: 1px solid HoneyDew;
+    border-collapse: collapse;
+  }
+  tr {
+    background-color: PaleTurquoise;
+  }
+  th, td {
+    vertical-align: top;
+    padding: 5px;
+    text-align: left;
+  }
+  th {
+    color: purple;
+  }
+  td {
+    color: purple;
+  }
+```
+
+Notice how some of the selectors use commas, for example `table, th, td`? That's a **list of selectors**: it means it applies to all `<th>` elements and all `<td>` elements. It saves typing out the same set of rules for each selector!