Your html goes here.
`
84 |
85 | Remove the text between the tags and replace it with your introduction text about your favourite item. For example:
86 |
87 | `The Raspberry Pi is a small computer and is my favourite item.
`
88 |
89 | 4. Now save that and take a look.
90 |
91 | 5. Above your introduction paragraph you can add text to act as a subheading. This could be important text that is not quite as important as the title.
92 |
93 | Add an `The Raspberry Pi is a small computer and is my favourite item. This is a video that explains what a Raspberry Pi is and how to set one up for the first time!
86 | ```
87 |
88 |
89 | 
90 |
91 |
92 |
93 |
--------------------------------------------------------------------------------
/lesson-4/files/html-cards.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/files/html-cards.pdf
--------------------------------------------------------------------------------
/lesson-4/images/CSS-panel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/images/CSS-panel.png
--------------------------------------------------------------------------------
/lesson-4/images/Raspi_Colour_R.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/images/Raspi_Colour_R.png
--------------------------------------------------------------------------------
/lesson-4/images/blurry-text-html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/images/blurry-text-html.png
--------------------------------------------------------------------------------
/lesson-4/images/blurry-text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/images/blurry-text.png
--------------------------------------------------------------------------------
/lesson-4/images/fonts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-4/images/fonts.png
--------------------------------------------------------------------------------
/lesson-4/lesson.md:
--------------------------------------------------------------------------------
1 | # Lesson 4 - Adding Some Style
2 |
3 | ##Introduction
4 |
5 | CSS, also known as Cascading Style Sheets, is used to style and control the layout of webpages. In this lesson, students will learn what CSS is, what it can be used for and how to write CSS for the first time to apply fonts to their webpage.
6 |
7 | ## Learning Objectives
8 |
9 | - Know what CSS is and how it is used in web design
10 | - Understand how CSS can be used to style a webpage
11 | - Be able to create custom styles for different elements of text on a webpage and apply them
12 |
13 |
14 | ## Learning Outcomes
15 |
16 | ###All students are able to:
17 |
18 | - Know what CSS is and how it affects HTML
19 | - Access the CSS panel on their webpages with Google Coder
20 | - Change the font used for ``
25 | - Add a size and weight to fonts with CSS
26 |
27 | ###Some students are able to:
28 |
29 | - Apply advanced CSS to make the fonts look more interesting
30 |
31 |
32 | ## Lesson Summary
33 |
34 | - HTML card sort activity
35 | - A teacher-led introduction to CSS
36 | - A demonstration of how to access the CSS panel on Google Coder
37 | - A demonstration on how to change fonts and sizes
38 | - Improving webpages with CSS
39 |
40 |
41 | ## Starter
42 |
43 | Create student groups of 2 or 3 and give each group a set of [HTML cards](files/html-cards.pdf). Students are to match the HTML tag with the correct answer card. After a few minutes, select each group to feedback one card to the rest of the class.
44 |
45 |
46 | ## Main Development
47 |
48 | 1. Remind the class how to connect their Raspberry Pi equipment together and boot their Google Coder servers, ensuring that students are allocated the correct SD card that they used in the previous lesson. Ensure that they can all log in. Students can use the [student instructions](worksheet.md) as a guide to remind them of the steps.
49 |
50 | 2. Demonstrate how to access the CSS panel on a webpage project in Google Coder. Ask students to change the padding to show how CSS affects the webpage they have already created.
51 |
52 | 3. Demonstrate how to change the font family, weight and size for `
` text too!
112 |
113 |
114 | ## Other Fun Things to do with Fonts
115 |
116 | You can use CSS to apply all sorts of fun styles. For example, why not make the text look a little blurry like this...
117 |
118 | 1. In the **CSS panel** type the following code underneath the `.pagecontent` section in curly brackets and above the `h1` section:
119 |
120 | ```css
121 | .blur {
122 | color: transparent;
123 | text-shadow: 0 0 5px rgba(0,0,0,0.5);
124 | }
125 | ```
126 |
127 | 
128 |
129 | 2. Click on the **HTML panel** to view the HTML code; underneath `
` type the following line:
130 |
131 | ```html
132 |
133 | ```
134 |
135 | 3. Remember most HTML tags have an open and a close tag. Adding a new div class adds a new opening tag. Therefore you need to add the closing tag '
'. Place this closing tag above `
Introduction
` like this:
136 |
137 | 
138 |
139 | 4. Click on the Save button and preview what your heading font looks like now! You can always remove this effect by deleting the `
` and `
` tags.
140 |
--------------------------------------------------------------------------------
/lesson-5/images/background-colour.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-5/images/background-colour.png
--------------------------------------------------------------------------------
/lesson-5/images/background-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-5/images/background-image.png
--------------------------------------------------------------------------------
/lesson-5/images/colour.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raspberrypilearning/coder-html-css-lessons/0422d09df8882f8645e0eef13d0e7614ffe24dcc/lesson-5/images/colour.jpg
--------------------------------------------------------------------------------
/lesson-5/lesson.md:
--------------------------------------------------------------------------------
1 | # Lesson 5 - Colour
2 |
3 | ##Introduction
4 |
5 | Applying colour to a webpage is a major part of its design. So far, students have been using the default black text on a white background. In this lesson they will learn how to use CSS to apply colours to different types of text and the background.
6 |
7 | ## Learning Objectives
8 |
9 | - Recall how CSS was used to change the font of types of text
10 | - Understand that colour can be applied to elements of a webpage using CSS
11 | - Be able to apply an appropriate colour scheme using hex colour values
12 |
13 | ## Learning Outcomes
14 |
15 | ###All students are able to:
16 |
17 | - Apply a colour to an element of a webpage using CSS
18 |
19 |
20 | ###Most students are able to:
21 |
22 | - Apply appropriate colours to multiple elements of a webpage with CSS, including text and background, with hex values
23 |
24 |
25 | ###Some students are able to:
26 |
27 | - Apply images to the background as well as colour with CSS
28 |
29 |
30 |
31 | ## Lesson Summary
32 | - Colour Scheme picker activity
33 | - A teacher-led recap of using CSS
34 | - A demonstration of how to access the CSS panel on Google Coder
35 | - A demonstration on how to change colours of fonts and the background
36 | - Improving webpages with CSS
37 |
38 |
39 | ## Starter
40 |
41 | Direct students to the [Colour Scheme Designer Picker](http://colorschemedesigner.com/) Website and give a quick demonstration on how to use it. Explain to students that they will need to select some colours for their webpage. When students are happy with their selections, ask them to note the hex values for each colour they want to use on their webpage.
42 |
43 | ## Main Development
44 | 1. Remind the class how to connect their Raspberry Pi equipment together and boot their Google Coder servers, ensuring that students are allocated the correct SD card that they used in the previous lesson. Ensure that they can all log in. Students can use the [student instructions](worksheet.md) as a guide to remind them of the steps.
45 |
46 | 2. Demonstrate how to access the CSS panel on a webpage project in Google Coder. Select students to recall and explain the steps they took in the last lesson to add fonts to the different text styles.
47 |
48 | 3. Demonstrate how to add colour to `
` using the name of a colour like `color: magenta;`. *Note: the American spelling of colour is important!* Allow students to change the colour of `` on their webpages using the names of colours.
49 |
50 | 4. Show students that instead of using the names of colours, which can be limited, they can use Hex values instead, like the ones they selected at the start of the lesson. Explain that hex values are codes that help a browser show colour. Following the [student instructions](worksheet.md), allow the class to try adding different colours to their text.
51 |
52 | 5. Demonstrate to students how to change the background colour using CSS and allow them time to try this too:
53 |
54 | ```css
55 | body {
56 | background-color:#b0c4de;
57 | }
58 | ```
59 | As an extension task, students could replace the background colour with an image following the student instructions.
60 |
61 | ## Plenary
62 |
63 | In the last section of the lesson, ask students to swap seats with a partner and review their website, giving feedback on what they like about the website and targets to improve.
64 |
65 | Finally, ask students to save their work, and turn off their Raspberry Pis.
66 |
67 |
68 | ## Homework
69 |
70 | Students should review a website of their choice by answering the following questions:
71 |
72 | - What is the name of the website?
73 | - Who is the target audience?
74 | - Do you think it is well designed or badly designed, and why?
75 | - Are the colours easy on the eye?
76 | - Is the layout clear and uncluttered?
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/lesson-5/worksheet.md:
--------------------------------------------------------------------------------
1 | # Student Instructions - Colour
2 |
3 | ## Setting up your Raspberry Pi using Google Coder
4 |
5 | The Raspberry Pi is a bare bones computer. It’s not much use on its own. In order to use it as a webserver and create websites on it, we need to connect a number of things to it:
6 |
7 | - An SD card. This card contains the Google Coder that can be loaded onto the Raspberry Pi in order for it to be used to create websites. You need to slide the card into the slot with the metal pins facing in towards the Raspberry Pi. The label should be visible when it is inserted.
8 | - An ethernet cable or wifi adaptor. This will allow you to connect the Raspberry Pi to a local network to host your website projects on.
9 | - A power adaptor. Plug the power adaptor into a socket and then the small USB connector into the Raspberry Pi. When you turn the socket switch on, you should see the Raspberry Pi flash and text should appear on the monitor.
10 |
11 | *Note: A monitor, keyboard and mouse are not necessary, as you will connect to the Raspberry Pi from an internet browser on a different computer on the network.*
12 |
13 | ## Connect to your Raspberry Pi Coder Server
14 |
15 | Now you have connected your Raspberry Pi to the local network you can use a computer or laptop to connect to it. You will see that after you plugged in the power cable some lights came on; this indicates that your Raspberry Pi Coder server is booting up.
16 |
17 | 1. Give it a few minutes to boot, and then in the web browser on your computer type:
18 |
19 | ```
20 | http://coder.local/
21 | ```
22 | Don't forget the `http://` part!
23 |
24 | 2. You might have to enter the Coder number given to you by your teacher instead, for example `http://coder01.local/` or `http://coder02.local/`.
25 |
26 | 3. Once connected, you may see a security certificate warning screen; it is OK to click the button to 'proceed anyway'. Then you will see a screen asking you to type a password. Use the password that you set up during the first lesson, for example 'raspberry'.
27 |
28 | 4. Load your project page from the last lesson by clicking on the project icon.
29 |
30 | ## A Splash of Colour
31 |
32 | In the last lesson you started to add some style to your webpage using CSS, concentrating on styles of fonts and changing their attributes like size and weight. This lesson will build on the CSS you have already learned to change the colours of different elements of your webpage.
33 |
34 | Sometimes it can be difficult to know what colours to use that complement each other. You can use a [colour scheme designer like this](http://colorschemedesigner.com/) to help. Find some colours that you would like to use for your text.
35 |
36 | 
37 |
38 | ## Adding Colours in CSS
39 |
40 | All the text used on your webpage is a default black colour. You can give each type of text a colour in the **CSS panel**.
41 |
42 | 1. Click on the CSS tab at the top of the screen.
43 | 2. Navigate to the part of the code for **h1**.
44 | 3. Add the following line of code `color: magenta;` underneath the font settings before the curly bracket like this:
45 |
46 | ```css
47 | h1 {
48 | font-family: courier, monospace;
49 | font-size: 40px;
50 | font-weight: bold;
51 | line-height: 2em;
52 | color: magenta;
53 | }
54 | ```
55 | *Note: You will need to use the American spelling of 'colour' in your code for it to work!*
56 |
57 | 4. Now save your changes and preview what they look like using the preview button. Was it the colour that you were expecting to see? What happens if you replace `magenta` with `blue`?
58 |
59 | As you can see, you can use colour names to apply colours in CSS. These are generic values, though, and aren’t always exactly the colour you want. If you want a little more control over colour then you’ll need to use hex values.
60 |
61 | Hex values are codes that help a browser show colour. They look like this: `#FF0000`; that’s the hex value for red. Hex codes are six digits long, and contain only the numbers 0-9 and the letters A-F.
62 |
63 | Here are some other example hex values:
64 |
65 | ```css
66 | #00FF00 - only green
67 | #0000FF - only blue
68 | #C0392B - softer red
69 | #16A085 - softer green
70 | #3498D8 - softer blue
71 | #D977D4 - pink
72 | #F1C40F - yellow
73 | #F39C12 - orange
74 | #FFFFFF - white
75 | #000000 - black
76 | #999999 - grey
77 | ```
78 |
79 | 5. Change the colours of all of your text styles, using hex codes from the colour scheme designer webpage you used at the start of the lesson. Hover your mouse over a colour you like and it will give you the hex value for it.
80 |
81 | ## Changing the Background Colour
82 |
83 | Text is not the only element of the webpage that you may wish to choose a colour for. Currently the background is a default white colour. Let's change that by adding a style.
84 |
85 | 1. Make sure that you have the **CSS panel** selected and navigate to the end of your code.
86 | 2. Add the following:
87 |
88 | ```css
89 | body {
90 | background-color:#b0c4de;
91 | }
92 | ```
93 |
94 | 3. Click on **save** and then click on the preview button to see what happens.
95 | 4. If you do not like the colour, then you can change it by changing the hex value.
96 | 5. You don't need to end there; you can also change the background colour of your text. Navigate to **h1** and add the line `background-color:#6495ed;` after the text colour and before the closing curly bracket like this:
97 |
98 | 
99 |
100 | ## Background Image
101 |
102 | Instead of using one colour for the background, you could use an image instead. To do this you will need to find an image that you want to use, save it somewhere on your computer and then upload it to Coder using the Media folder. You did this before in lesson 3.
103 |
104 | 1. Click on the **Media** button that looks like a picture of a folder.
105 | 2. Click on the `“+”` button. You should get a prompt to upload a file.
106 | 3. Select an image of your choice from a location on your computer.
107 | 4. Once the image is uploaded, you should see its name and the date it was uploaded appear.
108 |
109 | 5. Click on the **CSS panel** and replace `background-color` with `background-image:url("image.jpg")` like this:
110 |
111 | ```css
112 | body {
113 | background-image:url("");
114 | }
115 | ```
116 |
117 | 6. To add the location of the image, click between `(" ")`, then with the media folder open click on **paste to code** and the URL of the image will be added.
118 |
119 | 7. Save your work so far and then see if it has worked by clicking on the preview window. You should end up with code that looks something like this:
120 |
121 | ```css
122 | body {
123 | background-image:url("/static/apps/raspberry_pi/media/Raspi_Colour_R.png");
124 | }
125 | ```
126 |
127 | 
128 |
--------------------------------------------------------------------------------
/lesson-6/lesson.md:
--------------------------------------------------------------------------------
1 | # Lesson 6 - Feedback & Evaluation
2 |
3 | ##Introduction
4 |
5 | In this lesson, students will reflect on their webpage design and that of their peers for a given audience, with attention to trustworthiness, design and usability. This is an important part of creating any digital artefact in computing and it can be overlooked.
6 |
7 | ## Learning Objectives
8 |
9 | - Understand what makes a good webpage design
10 | - Be able to apply feedback from others to their webpage design in order to improve it
11 | - Evaluate a webpage design with given criteria
12 |
13 | ## Learning Outcomes
14 |
15 | ###All students are able to:
16 |
17 | - Explain their likes and dislikes about a webpage design
18 | - Set some criteria to be used by others to evaluate their webpage
19 |
20 | ###Most students are able to:
21 |
22 | - Provide relevant feedback to their peers on webpage design
23 |
24 |
25 | ###Some students are able to:
26 |
27 | - Explain the good and bad points about their webpage design, with attention to trustworthiness, design and usability
28 |
29 |
30 | ## Lesson Summary
31 | - Class discussion on reviewing website design
32 | - Setup of Raspberry Pi Google Coder webservers
33 | - Peer assessment against criteria
34 | - Self-evaluation against criteria
35 | - Improving webpages based on feedback and evaluation
36 |
37 |
38 | ## Starter
39 |
40 | For homework in the previous lesson, students were asked to review a website of their choice by answering the following questions:
41 |
42 | - What is the name of the website?
43 | - Who is the target audience?
44 | - Do you think it is well designed or badly designed, and why?
45 | - Are the colours easy on the eye?
46 | - Is the layout clear and uncluttered?
47 |
48 | Select students to feedback their reviews to the rest of the class. Draw out from these reviews evaluation criteria that students identified as being important, and display them on the board. Discuss what makes a good webpage design.
49 |
50 | ## Main Development
51 |
52 | 1. Ask students to connect their Raspberry Pi equipment together and boot their Google Coder servers, then log in and open their webpages that they have been working on.
53 |
54 | 2. Next ask students to swap seats with a partner. Using the critera generated at the start of the lesson, students should review their partner's webpage, giving relevant helpful suggestions for improvement. Afterwards, students should return to their seats, read the feedback carefully and make one of the suggested improvements to their webpage. A note of the improvement could be made on the student's blog or e-portfolio if they have one.
55 |
56 | 3. Using the same criteria, students should then self-evaluate their webpage and make any impovements that they see fit. A note of the improvements could be added to a blog or e-portfolio to record the changes.
57 |
58 | ## Plenary
59 |
60 | Select students to explain the journey their website design took during this lesson:
61 | - What did the webpage look like at the start of the lesson?
62 | - What improvements were suggested by others?
63 | - What changed as a result of the feedback?
64 | - If they were to start the project again, what would they do differently?
65 |
66 | If students have access to a blog or e-portfolio they could answer these questions in writing, completing them for homework.
67 |
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/meta.yml:
--------------------------------------------------------------------------------
1 | title: Google Coder - HTML & CSS Scheme of Work
2 | os: coder
3 | category: teach
4 | lessons:
5 | 1: Websites & Webservers
6 | 2: What is HTML?
7 | 3: Adding Images and Other Media
8 | 4: Adding Style with CSS
9 | 5: Colour with CSS
10 | 6: Evaluation
11 |
--------------------------------------------------------------------------------
/overview.md:
--------------------------------------------------------------------------------
1 | Google Coder is a free, open source project that turns a Raspberry Pi into a simple platform that educators and parents can use to teach the basics of building for the web. New coders can craft small projects in HTML, CSS and Javascript, right from the web browser.
2 |
3 | This scheme of work will introduce students to the infrastructure of website development, in particular the concept of web pages (HTML & CSS) and web servers. It is specifically targeted towards KS2/KS3 Computing. This has been developed in harmony with the new Computing curriculum in the UK and is based on the Google Coder Project - The Perfect Recipe.
4 |
--------------------------------------------------------------------------------
/software.md:
--------------------------------------------------------------------------------
1 | # Software installation
2 |
3 | ## Google Coder
4 | In order to access these lessons all SD cards need to be configured to use the [Google Coder software](http://googlecreativelab.github.io/coder/).
5 |
6 | ## Multiple Google Coder Setup
7 | As there will be multiple Raspberry Pis acting as servers some setup is required in configuring them. See [multiple coder devices setup guide](https://github.com/googlecreativelab/coder/wiki/Using-Multiple-Coder-Devices-(Lab-Setup)).
8 |
--------------------------------------------------------------------------------
/software.yml:
--------------------------------------------------------------------------------
1 | - Google Coder
2 |
--------------------------------------------------------------------------------