Students will start this lesson by taking a trip back in time to try a computer their parents may have used! They'll do this by testing 3 virtual computers running in the web browser. (Note, these websites have been tested on computer / laptop, but they may not work on iPad or Chromebook.)
Students may work in pairs to visit one or more of the virtual computers, and report back to the class on the following:
The students have been testing some of the earliest mouse-driven Graphical User Interfaces (GUIs). Prior to the arrival of Mac and Windows operating systems, most computer users had only a keyboard and text commands to make everything happen, from creating and deleting files to playing games.
In this lesson series, we'll start each lesson by exploring GUI design principles, as well as conventions - things that GUIs have in common. Many of these conventions have been around for decades.
The Macintosh 128K released in 1984 (image CC-BY-SA-2.5-it All About Apple museum)
In this lesson, students will:
Let's start with some terms. Read these carefully, then answer the questions below.
The video below demonstrates creating a webpage with only HTML and CSS. This demonstration is done in the CodePen environment.
Try it yourself using this pre-written tutorial before checking the solution code.
Make the following changes to the pH scale website by editing the HTML and/or the CSS:
Like the main heading, the subtitle should be aligned to the left. It should have a font size of 20 pixels.
Try it yourself before checking the solution code.
Change the times table to a power table, eg.
2 to the power of 0 = 1
2 to the power of 1 = 2.
2 to the power of 2 = 4.
These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate Application and Creation.
Using your preferred online environment, create a website using only HTML and CSS to show a First Nations seasonal calendar with broad, coloured bands.
The solution screenshot below shows the traditional seasons used by the Wurundjeri, an Australian First Nations people of the Kulin nation. The information was obtained from this website, and the specific colours were picked from the image there too. Note that the information source is also linked under the heading at the top of the finished page.
Create a webpage that prompts the user for a number to start a countdown, then displays the countdown from that number to 1, followed by "BLASTOFF!". The page should have a dark red background with a black border, and white text.
The solution screenshot below shows what is presented if the user enters 16 when prompted.