`) but with more levels.
+
+Each pair of ` ` tags is a row, so everything in between them will be displayed on one line.
+
+The first row contains ` ` 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 ` ` 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 ` `: 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 `` elements and all ` ` elements. It saves typing out the same set of rules for each selector!
diff --git a/ru-RU/step_2.md b/ru-RU/step_2.md
new file mode 100644
index 0000000..09d987b
--- /dev/null
+++ b/ru-RU/step_2.md
@@ -0,0 +1,39 @@
+## Getting set up
+
+- Go to [the starter trinket](http://dojo.soy/se-html1-start){:target="_blank"}. You will see a box containing an example website project. On the right-hand side is the website, and on the left-hand side is the code that makes the website. 
+
+
+--- collapse ---
+---
+title: I have a Trinket account
+---
+
+- Click the **Remix** button at the top right of the project. If you are not signed in, you will be prompted to do so. Once you've signed in, you'll need to click **Remix** again. Clicking this button creates a copy of the project for you to work with.
+
+
+
+It should say **remixed** after you click it:
+
+
+
+--- /collapse ---
+
+--- collapse ---
+---
+title: I don't have a Trinket account
+---
+
+You can save your work by using one of the options in the **Share** menu. You will get a link that you can either save somewhere, for example in a document, or send to someone via email. **Note:** each time you make a change, you will get a new link.
+
+If you want to create an account on Trinket, follow the steps below. This will allow you to access your work easily from any computer, and to **remix** projects somebody else has shared with you. Remixing means you will save a copy of a project so you can make your own changes to it.
+
+- Go to [the Trinket website](http://dojo.soy/trinket) and click **Sign Up For Your Free Account**. You will need an email address to sign up.
+
+- Enter your email address and choose a password, or ask somebody to do this for you.
+
+- You can now access all your saved or remixed projects by clicking on your username and going to **My Trinkets**. 
+
+--- /collapse ---
+
+Let's start coding!
+
diff --git a/ru-RU/step_3.md b/ru-RU/step_3.md
new file mode 100644
index 0000000..f74717f
--- /dev/null
+++ b/ru-RU/step_3.md
@@ -0,0 +1,94 @@
+## Your first webpage!
+
+- In the left-hand panel, the **code panel**, click on the tab that says `index.html`.
+
+- Find the line that says `Hello!` and change it to your own message — be careful **not** to delete the tags`` at the start of the line and `
` at the end of the line. You should see your webpage update in the right-hand panel.
+
+
+
+- Now on the same line, change the `` and `
` to `` and ` `. Do you notice any change in the result on the right?
+
+```html
+ Hello!
+```
+
+--- collapse ---
+---
+title: HTML and tags explained
+---
+
+**HTML** is the code that makes a webpage.
+
+The `.html` in the file name tells the browser that the file is a webpage, so the browser knows to look for **tags** telling it what to display. (A browser is the program you use to look at websites, for example Chrome or Firefox.)
+
+HTML tags such as `` and `
` define different pieces of a page, for example paragraphs, headings, or the body. The pieces are all called **elements**. Think of them as building blocks.
+
+### Why do I need two tags?
+You need an **opening** and a **closing** tag to tell the browser where elements **start** and **end**. So for a paragraph, the opening `` tag says "Here comes some text that I want you to display as a paragraph." The closing `
` tag tells the browser where the paragraph ends.
+
+Everything in between the `` and `` tags is your webpage.
+
+- Notice how the closing tag **always** has a forward slash `/`.
+
+--- /collapse ---
+
+- Try changing the numbers in your **heading** tags to see the different sizes they give you. They can go from `` all the way up to ``. Remember to change both the opening and closing tag so that they match.
+
+- Find the code for the paragraph that says 'This website is about bird conservation.' and change it so that it looks like this:
+
+```html
+
+ This website is about bird conservation .
+
+```
+
+Can you work out what the ` ` and ` ` tags do?
+
+
+
+--- challenge ---
+
+## Challenge: add some more text of your own
+
+- Try adding a new paragraph or heading to your page using some of the tags you've learned about.
+
+--- hints ---
+
+--- hint ---
+
+When you want to put text on a page, you need to put it in between two tags that tell your browser how to display your text. For example, the `
` tags tell the browser that whatever is in between them is a new paragraph of text, and the ` ` tags tell it that the text in between is a heading.
+
+--- /hint ---
+
+--- hint ---
+
+The code for paragraphs looks like this:
+
+```html
+ This is one paragraph of text.
+
+ This is another paragraph.
+ Everything in between one set of p tags is
+ displayed together in one long line on the webpage.
+```
+
+--- /hint ---
+
+
+--- hint ---
+
+The code for headings looks like this:
+
+```html
+ This is a heading.
+```
+
+Headings will normally be displayed bigger or bolder than the paragraphs.
+
+--- /hint ---
+
+--- /hints ---
+
+--- /challenge ---
+
+Congratulations, you've built your first webpage! On the next card, you'll find out how to control how it looks.
diff --git a/ru-RU/step_4.md b/ru-RU/step_4.md
new file mode 100644
index 0000000..4cd7136
--- /dev/null
+++ b/ru-RU/step_4.md
@@ -0,0 +1,72 @@
+## Controlling how it looks
+
+The code that describes what a website looks like is called **CSS**.
+
+- Look at the tabs at the top of the code panel, and go to the file `styles.css` by clicking on the tab with that name. The file contains the following text:
+
+```css
+ body {
+ background-color: white;
+ }
+```
+
+- Change the `white` colour to `LightSkyBlue` and see what happens. Your website should now have a blue background!
+
+
+
+--- collapse ---
+---
+title: How does it work?
+---
+
+If you look at the top of the `index.html` file, you will see the following line:
+
+```html
+ ` headings, you use the `h1` selector. Below the closing curly brace containing the CSS rule for the body, add the following code.
+
+```css
+ h1 {
+ color: orange;
+ font-family: "Times New Roman", serif;
+ }
+```
+
+Your heading text should be orange now, with the paragraph in purple as before.
+
+
+
+Notice how the letters also look different as well as being a different colour? This is because you changed their **font family**. You can find some more fonts [here](http://dojo.soy/se-font-families).
+
+- Try adding a set of rules for the `` headings, using the `h2` selector.
+
+- Why not experiment with different colour combinations for the text and background? There are lots of colours available to use. Find a full list of them [here](http://dojo.soy/se-color-names).
diff --git a/ru-RU/step_5.md b/ru-RU/step_5.md
new file mode 100644
index 0000000..d940162
--- /dev/null
+++ b/ru-RU/step_5.md
@@ -0,0 +1,77 @@
+## Adding pictures
+
+Let's add a picture!
+
+- Go to the tab named `index.html`. Find the `` tag and type the following **above** it:
+
+```html
+ Ctrl (or cmd on a Mac) and A keys at the same time.
+
+
+
+- Press the Ctrl (or cmd on a Mac) and C keys together to copy the text.
+
+- Then go back to your website's HTML code, and click in the place where you want to put the video, for example below a heading or paragraph. **Paste** the code by pressing Ctrl (or cmd on a Mac) and V on your keyboard at the same time. Don't worry about understanding all the code you just pasted!
+
+
+
+You should see the video appear on your webpage.
+
+The same technique works for Google maps as well. Give it a go!
+
+- Go [here](http://dojo.soy/se-maps) and search for a place you want to show on your website. **Note:** do **not** share personal information such as your home address on a website!
+
+- Click on the result, then click the **Share** button, and copy the code and add it to your website as above. 
+
+- If you look carefully, you should find `width` and `height` **attributes** in the pasted code. You can change their values to make the map appear bigger or smaller.
+
+
+
+
+
diff --git a/ru-RU/step_7.md b/ru-RU/step_7.md
new file mode 100644
index 0000000..939e700
--- /dev/null
+++ b/ru-RU/step_7.md
@@ -0,0 +1,49 @@
+## Making a list
+
+Now you will learn how to turn a list of items, such as "unicorns, robots, cats", into a nicer-looking list that you can do cool things with later.
+
+- In the `index.html` file, add the following code just above the line with `` on it:
+
+```html
+
+ Barn owl
+ Hen harrier
+ Yellowhammer
+ Curlew
+
+```
+
+The result should be a nice list like this:
+
+
+
+Notice that there is a separate pair of ` ` tags around each item in the list.
+
+This is a list of some protected birds in Ireland. You can change the items on the list to things that make sense for your website, and add a paragraph above the list to describe what it's a list of, if you like!
+
+How about if you wanted a numbered list? It's almost the same, but instead of ``, you use ``. A numbered list is also called an **ordered** list.
+
+- Add the following code below the code you just wrote — make sure it's **below** the ` ` tag!
+
+```html
+
+ Threats to birds:
+
+
+ Habitat destruction
+ Pollution
+ Climate change
+
+```
+
+Here's what it should look like now:
+
+
+
+--- challenge ---
+
+## Challenge: add style to your lists
+
+- See if you can add **CSS rules** to your stylesheet to change how your lists look.
+
+--- /challenge ---
diff --git a/ru-RU/step_8.md b/ru-RU/step_8.md
new file mode 100644
index 0000000..526d8cb
--- /dev/null
+++ b/ru-RU/step_8.md
@@ -0,0 +1,96 @@
+## Creating links
+
+On this card you'll learn how to make a link that takes you to another page when it's clicked.
+
+- Add the following code to the body section of `index.html`:
+
+```html
+ Click here
+```
+
+The ` ` tags turn whatever is in between them into a link.
+
+- Try clicking your link to see what happens. It does nothing, right?
+
+That's because the `href` attribute is empty at the moment. It needs to contain the **URL** (web address) of the page that you want to link to.
+
+- Go to Wikipedia and find a page about something on your website. I'm going to use the page about bird conservation.
+
+- Click in the address bar and select all of the text in i5. That's the complete URL of the page you're on. Press the Ctrl (or cmd ) and C keys at the same time to copy it.
+
+ 
+
+- In your trinket, click in between the quotation marks after `href=` and press the Ctrl (or cmd ) and V keys at the same time to paste in the URL you just copied. Your code should look something like this now:
+
+```html
+ Click here
+```
+
+You just created your first link! Click on it to see if it works now.
+
+
+
+--- collapse ---
+---
+title: Links to other websites
+---
+
+Trinket has trouble with some web addresses. You can try URLs of websites other than Wikipedia if you like, but they may not work in your trinket. However, if you were to download your project and view the files in a web browser, you would see the links working.
+
+--- /collapse ---
+
+- Try putting a picture in between the ` ` tags instead of the words `Click here`, like this:
+
+```html
+
+
+```
+
+- Click on your picture. Do you see that it was turned into a link?
+
+You can put a link into other elements of your webpage too, such as in a paragraph or even in a list. Here is an example of a sentence with a link in it:
+
+```html
+
+ Click here to read about bird conservation on Wikipedia.
+
+```
+
+
+
+--- challenge ---
+
+## Challenge: put a link into a list
+
+- See if you can make a list that contains a link inside one of the list items.
+
+--- hints ---
+
+--- hint ---
+
+To turn a list item ` ` into a link, put all of it, including the list tags, in between a pair of link tags ` ` and add the `href` attribute as you've done above.
+
+--- /hint ---
+
+--- hint ---
+
+In the following list, the 'Hen harrier' list item has been turned into a link.
+
+```html
+
+```
+
+--- /hint ---
+
+--- /hints ---
+
+
+--- /challenge ---
+
+
diff --git a/ru-RU/step_9.md b/ru-RU/step_9.md
new file mode 100644
index 0000000..2ff8818
--- /dev/null
+++ b/ru-RU/step_9.md
@@ -0,0 +1,54 @@
+## Adding more pages
+
+This card will show you how to add more pages to your website.
+
+- At the top of the code panel, click on the **+** symbol next to the tabs, and type in a name for your new file. It must end in `.html` (including the dot!) so that the browser knows it's a webpage.
+
+
+
+--- collapse ---
+---
+title: Renaming or deleting a file
+---
+
+If you want to change the name of a file, click on the **cog** icon to the right of the file name, and then click the **pencil** icon. Type in the new name and press **Enter**. You can also delete a file by clicking the **bin** icon instead of the **pencil** icon. 
+
+You might be wondering why you can't change the name of the `index.html` file. `index.html` is a special name used for the **homepage** of a website. That's the first page you land on when you visit a website. Whenever you go to a website's homepage, the browser looks for the file called `index.html` and displays it on your screen.
+
+--- /collapse ---
+
+- Find the file `template.html` and copy and paste all of the code from it into your new file. Since you want to copy the whole thing, you can click anywhere on the code and use the keyboard shortcut Ctrl (or cmd ) and A to select all of it at once.
+
+- Change the text in between the ` ` tags so your new page has a suitable title. Trinket won't display the title, but you can see it at the top of your browser window if you download your project.
+
+
+
+- In between the ` ` tags in the new file, use the tags you have learned about to add stuff to the page, such as paragraphs, headings, images, and lists!
+
+- Repeat the steps above for each new page that you want to add.
+
+When there are too many tabs for Trinket to show at once, you can use the **<** and **>** icons in the top left-hand corner of the tabs to scroll between them.
+
+
+
+Now you need to make links so that you can get to each of your new pages! Let's put all the links in a list.
+
+- In the `index.html` file, add the following code to the body of your webpage:
+
+```html
+
+```
+
+- Change the value of the `href` attribute for each link (remember, that's the text inside the quotation marks) so that it exactly matches the name of each HTML file that you have created.
+
+- Change the text in between the ` ` tags to suitable descriptions of your pages.
+
+Now you can navigate to your new pages!
+
+
+
diff --git a/sr-SP/images/AddressBarURL.png b/sr-SP/images/AddressBarURL.png
new file mode 100644
index 0000000..8d652a5
Binary files /dev/null and b/sr-SP/images/AddressBarURL.png differ
diff --git a/sr-SP/images/EditFilename.png b/sr-SP/images/EditFilename.png
new file mode 100644
index 0000000..be12c31
Binary files /dev/null and b/sr-SP/images/EditFilename.png differ
diff --git a/sr-SP/images/EmbedGoogleMap.png b/sr-SP/images/EmbedGoogleMap.png
new file mode 100644
index 0000000..9c511c8
Binary files /dev/null and b/sr-SP/images/EmbedGoogleMap.png differ
diff --git a/sr-SP/images/EmbedYouTube.png b/sr-SP/images/EmbedYouTube.png
new file mode 100644
index 0000000..d7a1479
Binary files /dev/null and b/sr-SP/images/EmbedYouTube.png differ
diff --git a/sr-SP/images/EmbedYouTube2.png b/sr-SP/images/EmbedYouTube2.png
new file mode 100644
index 0000000..d8589c0
Binary files /dev/null and b/sr-SP/images/EmbedYouTube2.png differ
diff --git a/sr-SP/images/EmbeddedGoogleMapCode.png b/sr-SP/images/EmbeddedGoogleMapCode.png
new file mode 100644
index 0000000..374a9c1
Binary files /dev/null and b/sr-SP/images/EmbeddedGoogleMapCode.png differ
diff --git a/sr-SP/images/MyTrinketsMenuWide.png b/sr-SP/images/MyTrinketsMenuWide.png
new file mode 100644
index 0000000..1d22691
Binary files /dev/null and b/sr-SP/images/MyTrinketsMenuWide.png differ
diff --git a/sr-SP/images/OrderedList.png b/sr-SP/images/OrderedList.png
new file mode 100644
index 0000000..cb87397
Binary files /dev/null and b/sr-SP/images/OrderedList.png differ
diff --git a/sr-SP/images/UnorderedList.png b/sr-SP/images/UnorderedList.png
new file mode 100644
index 0000000..626e004
Binary files /dev/null and b/sr-SP/images/UnorderedList.png differ
diff --git a/sr-SP/images/badge-footer-image-html-beginner.png b/sr-SP/images/badge-footer-image-html-beginner.png
new file mode 100644
index 0000000..08e22d5
Binary files /dev/null and b/sr-SP/images/badge-footer-image-html-beginner.png differ
diff --git a/sr-SP/images/banner.png b/sr-SP/images/banner.png
new file mode 100644
index 0000000..2360cc8
Binary files /dev/null and b/sr-SP/images/banner.png differ
diff --git a/sr-SP/images/banner.svg b/sr-SP/images/banner.svg
new file mode 100644
index 0000000..4a18fb5
--- /dev/null
+++ b/sr-SP/images/banner.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sr-SP/images/egBlankPageCodePasted.png b/sr-SP/images/egBlankPageCodePasted.png
new file mode 100644
index 0000000..418bef8
Binary files /dev/null and b/sr-SP/images/egBlankPageCodePasted.png differ
diff --git a/sr-SP/images/egBlankPageSelectAll.png b/sr-SP/images/egBlankPageSelectAll.png
new file mode 100644
index 0000000..1fa249e
Binary files /dev/null and b/sr-SP/images/egBlankPageSelectAll.png differ
diff --git a/sr-SP/images/egCoolMenuBar.png b/sr-SP/images/egCoolMenuBar.png
new file mode 100644
index 0000000..4c53f53
Binary files /dev/null and b/sr-SP/images/egCoolMenuBar.png differ
diff --git a/sr-SP/images/egCssColorsFonts.png b/sr-SP/images/egCssColorsFonts.png
new file mode 100644
index 0000000..860d3b1
Binary files /dev/null and b/sr-SP/images/egCssColorsFonts.png differ
diff --git a/sr-SP/images/egFirstCSSbluebg.png b/sr-SP/images/egFirstCSSbluebg.png
new file mode 100644
index 0000000..27d06d1
Binary files /dev/null and b/sr-SP/images/egFirstCSSbluebg.png differ
diff --git a/sr-SP/images/egFirstHtmlCode.png b/sr-SP/images/egFirstHtmlCode.png
new file mode 100644
index 0000000..0b2cbe0
Binary files /dev/null and b/sr-SP/images/egFirstHtmlCode.png differ
diff --git a/sr-SP/images/egFirstTags.png b/sr-SP/images/egFirstTags.png
new file mode 100644
index 0000000..883fea2
Binary files /dev/null and b/sr-SP/images/egFirstTags.png differ
diff --git a/sr-SP/images/egImgCode.png b/sr-SP/images/egImgCode.png
new file mode 100644
index 0000000..ddc7a1c
Binary files /dev/null and b/sr-SP/images/egImgCode.png differ
diff --git a/sr-SP/images/egImgCodeBird.png b/sr-SP/images/egImgCodeBird.png
new file mode 100644
index 0000000..00c8d75
Binary files /dev/null and b/sr-SP/images/egImgCodeBird.png differ
diff --git a/sr-SP/images/egImgCodeTito.png b/sr-SP/images/egImgCodeTito.png
new file mode 100644
index 0000000..c282df7
Binary files /dev/null and b/sr-SP/images/egImgCodeTito.png differ
diff --git a/sr-SP/images/egLinkTagWithURL.png b/sr-SP/images/egLinkTagWithURL.png
new file mode 100644
index 0000000..6e0a7cf
Binary files /dev/null and b/sr-SP/images/egLinkTagWithURL.png differ
diff --git a/sr-SP/images/egListOfPageLinks.png b/sr-SP/images/egListOfPageLinks.png
new file mode 100644
index 0000000..6476113
Binary files /dev/null and b/sr-SP/images/egListOfPageLinks.png differ
diff --git a/sr-SP/images/egLocalFileWindowTitle.png b/sr-SP/images/egLocalFileWindowTitle.png
new file mode 100644
index 0000000..83a42a5
Binary files /dev/null and b/sr-SP/images/egLocalFileWindowTitle.png differ
diff --git a/sr-SP/images/egMenuBarFirstStyle.png b/sr-SP/images/egMenuBarFirstStyle.png
new file mode 100644
index 0000000..536a97b
Binary files /dev/null and b/sr-SP/images/egMenuBarFirstStyle.png differ
diff --git a/sr-SP/images/egMenuBarFullStyles_result.png b/sr-SP/images/egMenuBarFullStyles_result.png
new file mode 100644
index 0000000..ad36013
Binary files /dev/null and b/sr-SP/images/egMenuBarFullStyles_result.png differ
diff --git a/sr-SP/images/egMenuBarInline.png b/sr-SP/images/egMenuBarInline.png
new file mode 100644
index 0000000..6d5aefd
Binary files /dev/null and b/sr-SP/images/egMenuBarInline.png differ
diff --git a/sr-SP/images/egMenuBarMoreStyle.png b/sr-SP/images/egMenuBarMoreStyle.png
new file mode 100644
index 0000000..5571f1a
Binary files /dev/null and b/sr-SP/images/egMenuBarMoreStyle.png differ
diff --git a/sr-SP/images/egMenuBarNoBullets.png b/sr-SP/images/egMenuBarNoBullets.png
new file mode 100644
index 0000000..a9b1e61
Binary files /dev/null and b/sr-SP/images/egMenuBarNoBullets.png differ
diff --git a/sr-SP/images/egMenuBarNoUnderline.png b/sr-SP/images/egMenuBarNoUnderline.png
new file mode 100644
index 0000000..8e8859e
Binary files /dev/null and b/sr-SP/images/egMenuBarNoUnderline.png differ
diff --git a/sr-SP/images/egMenuBarOnPage.png b/sr-SP/images/egMenuBarOnPage.png
new file mode 100644
index 0000000..fdc8cb1
Binary files /dev/null and b/sr-SP/images/egMenuBarOnPage.png differ
diff --git a/sr-SP/images/egNavLinksAtTop.png b/sr-SP/images/egNavLinksAtTop.png
new file mode 100644
index 0000000..2d49473
Binary files /dev/null and b/sr-SP/images/egNavLinksAtTop.png differ
diff --git a/sr-SP/images/egOrderedList.png b/sr-SP/images/egOrderedList.png
new file mode 100644
index 0000000..dd9a37b
Binary files /dev/null and b/sr-SP/images/egOrderedList.png differ
diff --git a/sr-SP/images/egParagraphLink.png b/sr-SP/images/egParagraphLink.png
new file mode 100644
index 0000000..602f371
Binary files /dev/null and b/sr-SP/images/egParagraphLink.png differ
diff --git a/sr-SP/images/egSelectedWhoops.png b/sr-SP/images/egSelectedWhoops.png
new file mode 100644
index 0000000..db6d2fe
Binary files /dev/null and b/sr-SP/images/egSelectedWhoops.png differ
diff --git a/sr-SP/images/egSelectedYay.png b/sr-SP/images/egSelectedYay.png
new file mode 100644
index 0000000..1f1852d
Binary files /dev/null and b/sr-SP/images/egSelectedYay.png differ
diff --git a/sr-SP/images/egSelectedYayWoops.png b/sr-SP/images/egSelectedYayWoops.png
new file mode 100644
index 0000000..c4319ca
Binary files /dev/null and b/sr-SP/images/egSelectedYayWoops.png differ
diff --git a/sr-SP/images/egTableResult.png b/sr-SP/images/egTableResult.png
new file mode 100644
index 0000000..a7c884d
Binary files /dev/null and b/sr-SP/images/egTableResult.png differ
diff --git a/sr-SP/images/egUnorderedList.png b/sr-SP/images/egUnorderedList.png
new file mode 100644
index 0000000..3350e5b
Binary files /dev/null and b/sr-SP/images/egUnorderedList.png differ
diff --git a/sr-SP/images/tktDownloadMenuCircled.png b/sr-SP/images/tktDownloadMenuCircled.png
new file mode 100644
index 0000000..e12bed7
Binary files /dev/null and b/sr-SP/images/tktDownloadMenuCircled.png differ
diff --git a/sr-SP/images/tktHTMLStartingPoint.png b/sr-SP/images/tktHTMLStartingPoint.png
new file mode 100644
index 0000000..33b7e0a
Binary files /dev/null and b/sr-SP/images/tktHTMLStartingPoint.png differ
diff --git a/sr-SP/images/tktImageIconArrow.png b/sr-SP/images/tktImageIconArrow.png
new file mode 100644
index 0000000..456f133
Binary files /dev/null and b/sr-SP/images/tktImageIconArrow.png differ
diff --git a/sr-SP/images/tktMenuButton.png b/sr-SP/images/tktMenuButton.png
new file mode 100644
index 0000000..86cd9fa
Binary files /dev/null and b/sr-SP/images/tktMenuButton.png differ
diff --git a/sr-SP/images/tktNewFileArrows.png b/sr-SP/images/tktNewFileArrows.png
new file mode 100644
index 0000000..61108fb
Binary files /dev/null and b/sr-SP/images/tktNewFileArrows.png differ
diff --git a/sr-SP/images/tktRemixButtonArrow.png b/sr-SP/images/tktRemixButtonArrow.png
new file mode 100644
index 0000000..cd498d2
Binary files /dev/null and b/sr-SP/images/tktRemixButtonArrow.png differ
diff --git a/sr-SP/images/tktRemixedSmall.png b/sr-SP/images/tktRemixedSmall.png
new file mode 100644
index 0000000..e0bb568
Binary files /dev/null and b/sr-SP/images/tktRemixedSmall.png differ
diff --git a/sr-SP/images/tktScrollTabIcons.png b/sr-SP/images/tktScrollTabIcons.png
new file mode 100644
index 0000000..bc08601
Binary files /dev/null and b/sr-SP/images/tktScrollTabIcons.png differ
diff --git a/sr-SP/images/tktUploadImages.png b/sr-SP/images/tktUploadImages.png
new file mode 100644
index 0000000..3b04e4f
Binary files /dev/null and b/sr-SP/images/tktUploadImages.png differ
diff --git a/sr-SP/meta.yml b/sr-SP/meta.yml
new file mode 100644
index 0000000..14875de
--- /dev/null
+++ b/sr-SP/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/sr-SP/oldstep2.md b/sr-SP/oldstep2.md
new file mode 100644
index 0000000..88d4ebf
--- /dev/null
+++ b/sr-SP/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/sr-SP/step_1.md b/sr-SP/step_1.md
new file mode 100644
index 0000000..be71612
--- /dev/null
+++ b/sr-SP/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.
+
+
+
+
+
+--- 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 ---
\ No newline at end of file
diff --git a/sr-SP/step_10.md b/sr-SP/step_10.md
new file mode 100644
index 0000000..0acbda2
--- /dev/null
+++ b/sr-SP/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.
+
+
+
+- Find the code for your list of links that you created in the previous step.
+
+- Just before the opening `` tag, press **Enter** to create a new blank line, then on the new line type the following tag: ``. Trinket automatically adds the closing tag right after, but you can delete that — it's not in the right place.
+
+- Just **after** the closing ` ` tag, press **Enter** to create a new blank line, and type in the closing tag `` there.
+
+- Now select your entire `` section and list by clicking just before the opening `` tag and dragging the mouse all the way down to just after the closing ` ` 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!
+
+ 
+
+- You are going to **cut** this time instead of copying. Hold down the Ctrl (or cmd ) key, and while holding it, press the X key. The highlighted code will disappear, but don't panic!
+
+- At the top of the file, click in the space between the `` tags. Make sure you see the cursor flashing there. Now paste in the code by pressing Ctrl (or cmd ) and V as usual. The code should look something like this:
+
+```html
+
+```
+
+--- collapse ---
+---
+title: Undo!
+---
+
+If you make a mistake, you can **undo** it by pressing Ctrl (or cmd ) and Z 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 `` section like you did before, and press the Ctrl (or cmd ) and C keys together to copy it.
+
+Then, in each of your `.html` files, click inside the `` 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/sr-SP/step_11.md b/sr-SP/step_11.md
new file mode 100644
index 0000000..a541342
--- /dev/null
+++ b/sr-SP/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.
+
+
+
+- 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.
+
+
+
+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!
+
+
+
+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;`.
+
+
+
+- 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 ` ` tags, like this: `Home `.
+
+- 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
+
+```
+
+- 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?
+
+
+
+On the next card you'll learn even more CSS tricks to make the menu bar look awesome.
diff --git a/sr-SP/step_12.md b/sr-SP/step_12.md
new file mode 100644
index 0000000..6b6054a
--- /dev/null
+++ b/sr-SP/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.
+
+
+
+- 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 `` inside list items `` in an unordered list `` inside a navigation section ``. Wow, that's four selectors!
+
+
+
+Remember how you removed the link tags from some list items in the `` 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!
+
+
+
+--- 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/sr-SP/step_13.md b/sr-SP/step_13.md
new file mode 100644
index 0000000..e29f927
--- /dev/null
+++ b/sr-SP/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:
+
+
+
+- Go to the file `page_with_table.html`. There you will see a bunch of code in between `` tags.
+
+- Select all of the code from the start of the `` tag to the end of the closing `
` 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 ` ` tags and in between the ` ` 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
+
+
+ Name
+ Location
+ Birds found there
+
+
+ Skellig Michael
+ Island off coast of Kerry
+ Puffins
+
+
+ Bird Island
+ Strangford Lough
+ Cormorants
+
+
+ Burren Birds of Prey Centre
+ County Clare
+ Various birds of prey including eagles, hawks, owls and falcons
+
+
+```
+
+--- /collapse ---
+
+To add another **row**, add another set of ` ` tags. In between them, you put the same number of **data** items with ` ` tags as you have in the other rows.
+
+To add another **column**, add an extra **data** item with a set of ` ` tags to **every** row. Also add an extra **header** item to the first row, using ` ` 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 `` and ``) but with more levels.
+
+Each pair of ` ` tags is a row, so everything in between them will be displayed on one line.
+
+The first row contains ` ` 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 ` ` 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 ` `: 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 `` elements and all ` ` elements. It saves typing out the same set of rules for each selector!
diff --git a/sr-SP/step_2.md b/sr-SP/step_2.md
new file mode 100644
index 0000000..09d987b
--- /dev/null
+++ b/sr-SP/step_2.md
@@ -0,0 +1,39 @@
+## Getting set up
+
+- Go to [the starter trinket](http://dojo.soy/se-html1-start){:target="_blank"}. You will see a box containing an example website project. On the right-hand side is the website, and on the left-hand side is the code that makes the website. 
+
+
+--- collapse ---
+---
+title: I have a Trinket account
+---
+
+- Click the **Remix** button at the top right of the project. If you are not signed in, you will be prompted to do so. Once you've signed in, you'll need to click **Remix** again. Clicking this button creates a copy of the project for you to work with.
+
+
+
+It should say **remixed** after you click it:
+
+
+
+--- /collapse ---
+
+--- collapse ---
+---
+title: I don't have a Trinket account
+---
+
+You can save your work by using one of the options in the **Share** menu. You will get a link that you can either save somewhere, for example in a document, or send to someone via email. **Note:** each time you make a change, you will get a new link.
+
+If you want to create an account on Trinket, follow the steps below. This will allow you to access your work easily from any computer, and to **remix** projects somebody else has shared with you. Remixing means you will save a copy of a project so you can make your own changes to it.
+
+- Go to [the Trinket website](http://dojo.soy/trinket) and click **Sign Up For Your Free Account**. You will need an email address to sign up.
+
+- Enter your email address and choose a password, or ask somebody to do this for you.
+
+- You can now access all your saved or remixed projects by clicking on your username and going to **My Trinkets**. 
+
+--- /collapse ---
+
+Let's start coding!
+
diff --git a/sr-SP/step_3.md b/sr-SP/step_3.md
new file mode 100644
index 0000000..f74717f
--- /dev/null
+++ b/sr-SP/step_3.md
@@ -0,0 +1,94 @@
+## Your first webpage!
+
+- In the left-hand panel, the **code panel**, click on the tab that says `index.html`.
+
+- Find the line that says `Hello!` and change it to your own message — be careful **not** to delete the tags`` at the start of the line and `
` at the end of the line. You should see your webpage update in the right-hand panel.
+
+
+
+- Now on the same line, change the `` and `
` to `` and ` `. Do you notice any change in the result on the right?
+
+```html
+ Hello!
+```
+
+--- collapse ---
+---
+title: HTML and tags explained
+---
+
+**HTML** is the code that makes a webpage.
+
+The `.html` in the file name tells the browser that the file is a webpage, so the browser knows to look for **tags** telling it what to display. (A browser is the program you use to look at websites, for example Chrome or Firefox.)
+
+HTML tags such as `` and `
` define different pieces of a page, for example paragraphs, headings, or the body. The pieces are all called **elements**. Think of them as building blocks.
+
+### Why do I need two tags?
+You need an **opening** and a **closing** tag to tell the browser where elements **start** and **end**. So for a paragraph, the opening `` tag says "Here comes some text that I want you to display as a paragraph." The closing `
` tag tells the browser where the paragraph ends.
+
+Everything in between the `` and `` tags is your webpage.
+
+- Notice how the closing tag **always** has a forward slash `/`.
+
+--- /collapse ---
+
+- Try changing the numbers in your **heading** tags to see the different sizes they give you. They can go from `` all the way up to ``. Remember to change both the opening and closing tag so that they match.
+
+- Find the code for the paragraph that says 'This website is about bird conservation.' and change it so that it looks like this:
+
+```html
+
+ This website is about bird conservation .
+
+```
+
+Can you work out what the ` ` and ` ` tags do?
+
+
+
+--- challenge ---
+
+## Challenge: add some more text of your own
+
+- Try adding a new paragraph or heading to your page using some of the tags you've learned about.
+
+--- hints ---
+
+--- hint ---
+
+When you want to put text on a page, you need to put it in between two tags that tell your browser how to display your text. For example, the `
` tags tell the browser that whatever is in between them is a new paragraph of text, and the ` ` tags tell it that the text in between is a heading.
+
+--- /hint ---
+
+--- hint ---
+
+The code for paragraphs looks like this:
+
+```html
+ This is one paragraph of text.
+
+ This is another paragraph.
+ Everything in between one set of p tags is
+ displayed together in one long line on the webpage.
+```
+
+--- /hint ---
+
+
+--- hint ---
+
+The code for headings looks like this:
+
+```html
+ This is a heading.
+```
+
+Headings will normally be displayed bigger or bolder than the paragraphs.
+
+--- /hint ---
+
+--- /hints ---
+
+--- /challenge ---
+
+Congratulations, you've built your first webpage! On the next card, you'll find out how to control how it looks.
diff --git a/sr-SP/step_4.md b/sr-SP/step_4.md
new file mode 100644
index 0000000..4cd7136
--- /dev/null
+++ b/sr-SP/step_4.md
@@ -0,0 +1,72 @@
+## Controlling how it looks
+
+The code that describes what a website looks like is called **CSS**.
+
+- Look at the tabs at the top of the code panel, and go to the file `styles.css` by clicking on the tab with that name. The file contains the following text:
+
+```css
+ body {
+ background-color: white;
+ }
+```
+
+- Change the `white` colour to `LightSkyBlue` and see what happens. Your website should now have a blue background!
+
+
+
+--- collapse ---
+---
+title: How does it work?
+---
+
+If you look at the top of the `index.html` file, you will see the following line:
+
+```html
+ ` headings, you use the `h1` selector. Below the closing curly brace containing the CSS rule for the body, add the following code.
+
+```css
+ h1 {
+ color: orange;
+ font-family: "Times New Roman", serif;
+ }
+```
+
+Your heading text should be orange now, with the paragraph in purple as before.
+
+
+
+Notice how the letters also look different as well as being a different colour? This is because you changed their **font family**. You can find some more fonts [here](http://dojo.soy/se-font-families).
+
+- Try adding a set of rules for the `` headings, using the `h2` selector.
+
+- Why not experiment with different colour combinations for the text and background? There are lots of colours available to use. Find a full list of them [here](http://dojo.soy/se-color-names).
diff --git a/sr-SP/step_5.md b/sr-SP/step_5.md
new file mode 100644
index 0000000..d940162
--- /dev/null
+++ b/sr-SP/step_5.md
@@ -0,0 +1,77 @@
+## Adding pictures
+
+Let's add a picture!
+
+- Go to the tab named `index.html`. Find the `` tag and type the following **above** it:
+
+```html
+ Ctrl (or cmd on a Mac) and A keys at the same time.
+
+
+
+- Press the Ctrl (or cmd on a Mac) and C keys together to copy the text.
+
+- Then go back to your website's HTML code, and click in the place where you want to put the video, for example below a heading or paragraph. **Paste** the code by pressing Ctrl (or cmd on a Mac) and V on your keyboard at the same time. Don't worry about understanding all the code you just pasted!
+
+
+
+You should see the video appear on your webpage.
+
+The same technique works for Google maps as well. Give it a go!
+
+- Go [here](http://dojo.soy/se-maps) and search for a place you want to show on your website. **Note:** do **not** share personal information such as your home address on a website!
+
+- Click on the result, then click the **Share** button, and copy the code and add it to your website as above. 
+
+- If you look carefully, you should find `width` and `height` **attributes** in the pasted code. You can change their values to make the map appear bigger or smaller.
+
+
+
+
+
diff --git a/sr-SP/step_7.md b/sr-SP/step_7.md
new file mode 100644
index 0000000..939e700
--- /dev/null
+++ b/sr-SP/step_7.md
@@ -0,0 +1,49 @@
+## Making a list
+
+Now you will learn how to turn a list of items, such as "unicorns, robots, cats", into a nicer-looking list that you can do cool things with later.
+
+- In the `index.html` file, add the following code just above the line with `` on it:
+
+```html
+
+ Barn owl
+ Hen harrier
+ Yellowhammer
+ Curlew
+
+```
+
+The result should be a nice list like this:
+
+
+
+Notice that there is a separate pair of ` ` tags around each item in the list.
+
+This is a list of some protected birds in Ireland. You can change the items on the list to things that make sense for your website, and add a paragraph above the list to describe what it's a list of, if you like!
+
+How about if you wanted a numbered list? It's almost the same, but instead of ``, you use ``. A numbered list is also called an **ordered** list.
+
+- Add the following code below the code you just wrote — make sure it's **below** the ` ` tag!
+
+```html
+
+ Threats to birds:
+
+
+ Habitat destruction
+ Pollution
+ Climate change
+
+```
+
+Here's what it should look like now:
+
+
+
+--- challenge ---
+
+## Challenge: add style to your lists
+
+- See if you can add **CSS rules** to your stylesheet to change how your lists look.
+
+--- /challenge ---
diff --git a/sr-SP/step_8.md b/sr-SP/step_8.md
new file mode 100644
index 0000000..526d8cb
--- /dev/null
+++ b/sr-SP/step_8.md
@@ -0,0 +1,96 @@
+## Creating links
+
+On this card you'll learn how to make a link that takes you to another page when it's clicked.
+
+- Add the following code to the body section of `index.html`:
+
+```html
+ Click here
+```
+
+The ` ` tags turn whatever is in between them into a link.
+
+- Try clicking your link to see what happens. It does nothing, right?
+
+That's because the `href` attribute is empty at the moment. It needs to contain the **URL** (web address) of the page that you want to link to.
+
+- Go to Wikipedia and find a page about something on your website. I'm going to use the page about bird conservation.
+
+- Click in the address bar and select all of the text in i5. That's the complete URL of the page you're on. Press the Ctrl (or cmd ) and C keys at the same time to copy it.
+
+ 
+
+- In your trinket, click in between the quotation marks after `href=` and press the Ctrl (or cmd ) and V keys at the same time to paste in the URL you just copied. Your code should look something like this now:
+
+```html
+ Click here
+```
+
+You just created your first link! Click on it to see if it works now.
+
+
+
+--- collapse ---
+---
+title: Links to other websites
+---
+
+Trinket has trouble with some web addresses. You can try URLs of websites other than Wikipedia if you like, but they may not work in your trinket. However, if you were to download your project and view the files in a web browser, you would see the links working.
+
+--- /collapse ---
+
+- Try putting a picture in between the ` ` tags instead of the words `Click here`, like this:
+
+```html
+
+
+```
+
+- Click on your picture. Do you see that it was turned into a link?
+
+You can put a link into other elements of your webpage too, such as in a paragraph or even in a list. Here is an example of a sentence with a link in it:
+
+```html
+
+ Click here to read about bird conservation on Wikipedia.
+
+```
+
+
+
+--- challenge ---
+
+## Challenge: put a link into a list
+
+- See if you can make a list that contains a link inside one of the list items.
+
+--- hints ---
+
+--- hint ---
+
+To turn a list item ` ` into a link, put all of it, including the list tags, in between a pair of link tags ` ` and add the `href` attribute as you've done above.
+
+--- /hint ---
+
+--- hint ---
+
+In the following list, the 'Hen harrier' list item has been turned into a link.
+
+```html
+
+```
+
+--- /hint ---
+
+--- /hints ---
+
+
+--- /challenge ---
+
+
diff --git a/sr-SP/step_9.md b/sr-SP/step_9.md
new file mode 100644
index 0000000..2ff8818
--- /dev/null
+++ b/sr-SP/step_9.md
@@ -0,0 +1,54 @@
+## Adding more pages
+
+This card will show you how to add more pages to your website.
+
+- At the top of the code panel, click on the **+** symbol next to the tabs, and type in a name for your new file. It must end in `.html` (including the dot!) so that the browser knows it's a webpage.
+
+
+
+--- collapse ---
+---
+title: Renaming or deleting a file
+---
+
+If you want to change the name of a file, click on the **cog** icon to the right of the file name, and then click the **pencil** icon. Type in the new name and press **Enter**. You can also delete a file by clicking the **bin** icon instead of the **pencil** icon. 
+
+You might be wondering why you can't change the name of the `index.html` file. `index.html` is a special name used for the **homepage** of a website. That's the first page you land on when you visit a website. Whenever you go to a website's homepage, the browser looks for the file called `index.html` and displays it on your screen.
+
+--- /collapse ---
+
+- Find the file `template.html` and copy and paste all of the code from it into your new file. Since you want to copy the whole thing, you can click anywhere on the code and use the keyboard shortcut Ctrl (or cmd ) and A to select all of it at once.
+
+- Change the text in between the ` ` tags so your new page has a suitable title. Trinket won't display the title, but you can see it at the top of your browser window if you download your project.
+
+
+
+- In between the ` ` tags in the new file, use the tags you have learned about to add stuff to the page, such as paragraphs, headings, images, and lists!
+
+- Repeat the steps above for each new page that you want to add.
+
+When there are too many tabs for Trinket to show at once, you can use the **<** and **>** icons in the top left-hand corner of the tabs to scroll between them.
+
+
+
+Now you need to make links so that you can get to each of your new pages! Let's put all the links in a list.
+
+- In the `index.html` file, add the following code to the body of your webpage:
+
+```html
+
+```
+
+- Change the value of the `href` attribute for each link (remember, that's the text inside the quotation marks) so that it exactly matches the name of each HTML file that you have created.
+
+- Change the text in between the ` ` tags to suitable descriptions of your pages.
+
+Now you can navigate to your new pages!
+
+
+
diff --git a/sv-SE/images/AddressBarURL.png b/sv-SE/images/AddressBarURL.png
new file mode 100644
index 0000000..8d652a5
Binary files /dev/null and b/sv-SE/images/AddressBarURL.png differ
diff --git a/sv-SE/images/EditFilename.png b/sv-SE/images/EditFilename.png
new file mode 100644
index 0000000..be12c31
Binary files /dev/null and b/sv-SE/images/EditFilename.png differ
diff --git a/sv-SE/images/EmbedGoogleMap.png b/sv-SE/images/EmbedGoogleMap.png
new file mode 100644
index 0000000..9c511c8
Binary files /dev/null and b/sv-SE/images/EmbedGoogleMap.png differ
diff --git a/sv-SE/images/EmbedYouTube.png b/sv-SE/images/EmbedYouTube.png
new file mode 100644
index 0000000..d7a1479
Binary files /dev/null and b/sv-SE/images/EmbedYouTube.png differ
diff --git a/sv-SE/images/EmbedYouTube2.png b/sv-SE/images/EmbedYouTube2.png
new file mode 100644
index 0000000..d8589c0
Binary files /dev/null and b/sv-SE/images/EmbedYouTube2.png differ
diff --git a/sv-SE/images/EmbeddedGoogleMapCode.png b/sv-SE/images/EmbeddedGoogleMapCode.png
new file mode 100644
index 0000000..374a9c1
Binary files /dev/null and b/sv-SE/images/EmbeddedGoogleMapCode.png differ
diff --git a/sv-SE/images/MyTrinketsMenuWide.png b/sv-SE/images/MyTrinketsMenuWide.png
new file mode 100644
index 0000000..1d22691
Binary files /dev/null and b/sv-SE/images/MyTrinketsMenuWide.png differ
diff --git a/sv-SE/images/OrderedList.png b/sv-SE/images/OrderedList.png
new file mode 100644
index 0000000..cb87397
Binary files /dev/null and b/sv-SE/images/OrderedList.png differ
diff --git a/sv-SE/images/UnorderedList.png b/sv-SE/images/UnorderedList.png
new file mode 100644
index 0000000..626e004
Binary files /dev/null and b/sv-SE/images/UnorderedList.png differ
diff --git a/sv-SE/images/badge-footer-image-html-beginner.png b/sv-SE/images/badge-footer-image-html-beginner.png
new file mode 100644
index 0000000..08e22d5
Binary files /dev/null and b/sv-SE/images/badge-footer-image-html-beginner.png differ
diff --git a/sv-SE/images/banner.png b/sv-SE/images/banner.png
new file mode 100644
index 0000000..2360cc8
Binary files /dev/null and b/sv-SE/images/banner.png differ
diff --git a/sv-SE/images/banner.svg b/sv-SE/images/banner.svg
new file mode 100644
index 0000000..4a18fb5
--- /dev/null
+++ b/sv-SE/images/banner.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sv-SE/images/egBlankPageCodePasted.png b/sv-SE/images/egBlankPageCodePasted.png
new file mode 100644
index 0000000..418bef8
Binary files /dev/null and b/sv-SE/images/egBlankPageCodePasted.png differ
diff --git a/sv-SE/images/egBlankPageSelectAll.png b/sv-SE/images/egBlankPageSelectAll.png
new file mode 100644
index 0000000..1fa249e
Binary files /dev/null and b/sv-SE/images/egBlankPageSelectAll.png differ
diff --git a/sv-SE/images/egCoolMenuBar.png b/sv-SE/images/egCoolMenuBar.png
new file mode 100644
index 0000000..4c53f53
Binary files /dev/null and b/sv-SE/images/egCoolMenuBar.png differ
diff --git a/sv-SE/images/egCssColorsFonts.png b/sv-SE/images/egCssColorsFonts.png
new file mode 100644
index 0000000..860d3b1
Binary files /dev/null and b/sv-SE/images/egCssColorsFonts.png differ
diff --git a/sv-SE/images/egFirstCSSbluebg.png b/sv-SE/images/egFirstCSSbluebg.png
new file mode 100644
index 0000000..27d06d1
Binary files /dev/null and b/sv-SE/images/egFirstCSSbluebg.png differ
diff --git a/sv-SE/images/egFirstHtmlCode.png b/sv-SE/images/egFirstHtmlCode.png
new file mode 100644
index 0000000..0b2cbe0
Binary files /dev/null and b/sv-SE/images/egFirstHtmlCode.png differ
diff --git a/sv-SE/images/egFirstTags.png b/sv-SE/images/egFirstTags.png
new file mode 100644
index 0000000..883fea2
Binary files /dev/null and b/sv-SE/images/egFirstTags.png differ
diff --git a/sv-SE/images/egImgCode.png b/sv-SE/images/egImgCode.png
new file mode 100644
index 0000000..ddc7a1c
Binary files /dev/null and b/sv-SE/images/egImgCode.png differ
diff --git a/sv-SE/images/egImgCodeBird.png b/sv-SE/images/egImgCodeBird.png
new file mode 100644
index 0000000..00c8d75
Binary files /dev/null and b/sv-SE/images/egImgCodeBird.png differ
diff --git a/sv-SE/images/egImgCodeTito.png b/sv-SE/images/egImgCodeTito.png
new file mode 100644
index 0000000..c282df7
Binary files /dev/null and b/sv-SE/images/egImgCodeTito.png differ
diff --git a/sv-SE/images/egLinkTagWithURL.png b/sv-SE/images/egLinkTagWithURL.png
new file mode 100644
index 0000000..6e0a7cf
Binary files /dev/null and b/sv-SE/images/egLinkTagWithURL.png differ
diff --git a/sv-SE/images/egListOfPageLinks.png b/sv-SE/images/egListOfPageLinks.png
new file mode 100644
index 0000000..6476113
Binary files /dev/null and b/sv-SE/images/egListOfPageLinks.png differ
diff --git a/sv-SE/images/egLocalFileWindowTitle.png b/sv-SE/images/egLocalFileWindowTitle.png
new file mode 100644
index 0000000..83a42a5
Binary files /dev/null and b/sv-SE/images/egLocalFileWindowTitle.png differ
diff --git a/sv-SE/images/egMenuBarFirstStyle.png b/sv-SE/images/egMenuBarFirstStyle.png
new file mode 100644
index 0000000..536a97b
Binary files /dev/null and b/sv-SE/images/egMenuBarFirstStyle.png differ
diff --git a/sv-SE/images/egMenuBarFullStyles_result.png b/sv-SE/images/egMenuBarFullStyles_result.png
new file mode 100644
index 0000000..ad36013
Binary files /dev/null and b/sv-SE/images/egMenuBarFullStyles_result.png differ
diff --git a/sv-SE/images/egMenuBarInline.png b/sv-SE/images/egMenuBarInline.png
new file mode 100644
index 0000000..6d5aefd
Binary files /dev/null and b/sv-SE/images/egMenuBarInline.png differ
diff --git a/sv-SE/images/egMenuBarMoreStyle.png b/sv-SE/images/egMenuBarMoreStyle.png
new file mode 100644
index 0000000..5571f1a
Binary files /dev/null and b/sv-SE/images/egMenuBarMoreStyle.png differ
diff --git a/sv-SE/images/egMenuBarNoBullets.png b/sv-SE/images/egMenuBarNoBullets.png
new file mode 100644
index 0000000..a9b1e61
Binary files /dev/null and b/sv-SE/images/egMenuBarNoBullets.png differ
diff --git a/sv-SE/images/egMenuBarNoUnderline.png b/sv-SE/images/egMenuBarNoUnderline.png
new file mode 100644
index 0000000..8e8859e
Binary files /dev/null and b/sv-SE/images/egMenuBarNoUnderline.png differ
diff --git a/sv-SE/images/egMenuBarOnPage.png b/sv-SE/images/egMenuBarOnPage.png
new file mode 100644
index 0000000..fdc8cb1
Binary files /dev/null and b/sv-SE/images/egMenuBarOnPage.png differ
diff --git a/sv-SE/images/egNavLinksAtTop.png b/sv-SE/images/egNavLinksAtTop.png
new file mode 100644
index 0000000..2d49473
Binary files /dev/null and b/sv-SE/images/egNavLinksAtTop.png differ
diff --git a/sv-SE/images/egOrderedList.png b/sv-SE/images/egOrderedList.png
new file mode 100644
index 0000000..dd9a37b
Binary files /dev/null and b/sv-SE/images/egOrderedList.png differ
diff --git a/sv-SE/images/egParagraphLink.png b/sv-SE/images/egParagraphLink.png
new file mode 100644
index 0000000..602f371
Binary files /dev/null and b/sv-SE/images/egParagraphLink.png differ
diff --git a/sv-SE/images/egSelectedWhoops.png b/sv-SE/images/egSelectedWhoops.png
new file mode 100644
index 0000000..db6d2fe
Binary files /dev/null and b/sv-SE/images/egSelectedWhoops.png differ
diff --git a/sv-SE/images/egSelectedYay.png b/sv-SE/images/egSelectedYay.png
new file mode 100644
index 0000000..1f1852d
Binary files /dev/null and b/sv-SE/images/egSelectedYay.png differ
diff --git a/sv-SE/images/egSelectedYayWoops.png b/sv-SE/images/egSelectedYayWoops.png
new file mode 100644
index 0000000..c4319ca
Binary files /dev/null and b/sv-SE/images/egSelectedYayWoops.png differ
diff --git a/sv-SE/images/egTableResult.png b/sv-SE/images/egTableResult.png
new file mode 100644
index 0000000..a7c884d
Binary files /dev/null and b/sv-SE/images/egTableResult.png differ
diff --git a/sv-SE/images/egUnorderedList.png b/sv-SE/images/egUnorderedList.png
new file mode 100644
index 0000000..3350e5b
Binary files /dev/null and b/sv-SE/images/egUnorderedList.png differ
diff --git a/sv-SE/images/tktDownloadMenuCircled.png b/sv-SE/images/tktDownloadMenuCircled.png
new file mode 100644
index 0000000..e12bed7
Binary files /dev/null and b/sv-SE/images/tktDownloadMenuCircled.png differ
diff --git a/sv-SE/images/tktHTMLStartingPoint.png b/sv-SE/images/tktHTMLStartingPoint.png
new file mode 100644
index 0000000..33b7e0a
Binary files /dev/null and b/sv-SE/images/tktHTMLStartingPoint.png differ
diff --git a/sv-SE/images/tktImageIconArrow.png b/sv-SE/images/tktImageIconArrow.png
new file mode 100644
index 0000000..456f133
Binary files /dev/null and b/sv-SE/images/tktImageIconArrow.png differ
diff --git a/sv-SE/images/tktMenuButton.png b/sv-SE/images/tktMenuButton.png
new file mode 100644
index 0000000..86cd9fa
Binary files /dev/null and b/sv-SE/images/tktMenuButton.png differ
diff --git a/sv-SE/images/tktNewFileArrows.png b/sv-SE/images/tktNewFileArrows.png
new file mode 100644
index 0000000..61108fb
Binary files /dev/null and b/sv-SE/images/tktNewFileArrows.png differ
diff --git a/sv-SE/images/tktRemixButtonArrow.png b/sv-SE/images/tktRemixButtonArrow.png
new file mode 100644
index 0000000..cd498d2
Binary files /dev/null and b/sv-SE/images/tktRemixButtonArrow.png differ
diff --git a/sv-SE/images/tktRemixedSmall.png b/sv-SE/images/tktRemixedSmall.png
new file mode 100644
index 0000000..e0bb568
Binary files /dev/null and b/sv-SE/images/tktRemixedSmall.png differ
diff --git a/sv-SE/images/tktScrollTabIcons.png b/sv-SE/images/tktScrollTabIcons.png
new file mode 100644
index 0000000..bc08601
Binary files /dev/null and b/sv-SE/images/tktScrollTabIcons.png differ
diff --git a/sv-SE/images/tktUploadImages.png b/sv-SE/images/tktUploadImages.png
new file mode 100644
index 0000000..3b04e4f
Binary files /dev/null and b/sv-SE/images/tktUploadImages.png differ
diff --git a/sv-SE/meta.yml b/sv-SE/meta.yml
new file mode 100644
index 0000000..14875de
--- /dev/null
+++ b/sv-SE/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/sv-SE/oldstep2.md b/sv-SE/oldstep2.md
new file mode 100644
index 0000000..88d4ebf
--- /dev/null
+++ b/sv-SE/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/sv-SE/step_1.md b/sv-SE/step_1.md
new file mode 100644
index 0000000..be71612
--- /dev/null
+++ b/sv-SE/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.
+
+
+
+
+
+--- 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 ---
\ No newline at end of file
diff --git a/sv-SE/step_10.md b/sv-SE/step_10.md
new file mode 100644
index 0000000..0acbda2
--- /dev/null
+++ b/sv-SE/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.
+
+
+
+- Find the code for your list of links that you created in the previous step.
+
+- Just before the opening `` tag, press **Enter** to create a new blank line, then on the new line type the following tag: ``. Trinket automatically adds the closing tag right after, but you can delete that — it's not in the right place.
+
+- Just **after** the closing ` ` tag, press **Enter** to create a new blank line, and type in the closing tag `` there.
+
+- Now select your entire `` section and list by clicking just before the opening `` tag and dragging the mouse all the way down to just after the closing ` ` 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!
+
+ 
+
+- You are going to **cut** this time instead of copying. Hold down the Ctrl (or cmd ) key, and while holding it, press the X key. The highlighted code will disappear, but don't panic!
+
+- At the top of the file, click in the space between the `` tags. Make sure you see the cursor flashing there. Now paste in the code by pressing Ctrl (or cmd ) and V as usual. The code should look something like this:
+
+```html
+