Skip to content

lesson.md

Latest commit

 

History

History
81 lines (44 loc) · 3.44 KB

lesson.md

File metadata and controls

81 lines (44 loc) · 3.44 KB

Lesson 5 - Colour

##Introduction

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.

Learning Objectives

  • Recall how CSS was used to change the font of types of text
  • Understand that colour can be applied to elements of a webpage using CSS
  • Be able to apply an appropriate colour scheme using hex colour values

Learning Outcomes

###All students are able to:

  • Apply a colour to an element of a webpage using CSS

###Most students are able to:

  • Apply appropriate colours to multiple elements of a webpage with CSS, including text and background, with hex values

###Some students are able to:

  • Apply images to the background as well as colour with CSS

Lesson Summary

  • Colour Scheme picker activity
  • A teacher-led recap of using CSS
  • A demonstration of how to access the CSS panel on Google Coder
  • A demonstration on how to change colours of fonts and the background
  • Improving webpages with CSS

Starter

Direct students to the Colour Scheme Designer Picker 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.

Main Development

  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 as a guide to remind them of the steps.

  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.

  3. Demonstrate how to add colour to <h1> using the name of a colour like color: magenta;. Note: the American spelling of colour is important! Allow students to change the colour of <h1> on their webpages using the names of colours.

  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, allow the class to try adding different colours to their text.

  5. Demonstrate to students how to change the background colour using CSS and allow them time to try this too:

    body {
	background-color:#b0c4de;
}

    As an extension task, students could replace the background colour with an image following the student instructions.

Plenary

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.

Finally, ask students to save their work, and turn off their Raspberry Pis.

Homework

Students should review a website of their choice by answering the following questions:

  • What is the name of the website?
  • Who is the target audience?
  • Do you think it is well designed or badly designed, and why?
  • Are the colours easy on the eye?
  • Is the layout clear and uncluttered?