Skip to main content
Skip to main content

Coding for GUIs (JavaScript edition)
Index page

Years 5-6; 7-8

About this course

This lesson sequence provides step-by-step video tutorials and challenges to incorporate Graphical User Interfaces (GUIs) into your General Purpose Programming. It follows on from the Visual To Text Coding lesson series.

Included videos can be used by a beginner teacher and/or students to see how to code each of the simple programs step-by-step with HTML, CSS and JavaScript.

Learning hooks at the start of each lesson encourage students to explore principles of User Experience and User Interface design.

This resource is most suitable if:

  • you have learned some basics of JavaScript programming, especially through the previous lesson series,
  • you have a little familiarity with HTML,
  • you benefit from slow-paced, step-by-step video tutorials


Getting ready

This video gives you a taster of the projects covered in this course.

Use this video to find out the key skills brought over from the previous course.

Lesson 1: Structure, style and function

Two/three 45-minute periods

  • Discover how HTML and CSS work together with JavaScript to make GUIs on webpages.
  • Create a colourful pH scale using HTML and CSS alone, without JavaScript.
  • Create your first interactive JavaScript program that looks good: a times table generator.
  • OPTIONAL: Challenge yourself to convert another simple JavaScript program to have attractive output on a webpage.
Lesson 1: Structure, style and function

Image credit: Alvy16/ Wikimedia Commons, CC BY 4.0

Videos in this lesson:

PH scale
PH scale video thumbnail
Times table generator
Times table generator video thumbnail

Go to lesson

Lesson 2: Controls for input

Two/three 45-minute periods

  • Begin incorporating buttons and other GUI controls like range sliders to trigger JavaScript code.
  • Create webpage-based applications to:
    • respond to numbers typed in or selected with an updown control
    • generate passwords
    • convert temperatures and currencies
  • OPTIONAL: Challenge yourself to make use of another GUI control in your own application.
Lesson 2: Controls for input

Image credit: mohamed Hassan/ Pixabay

Videos in this lesson:

Wi-Fi checker

Wi-Fi checker video thumbnail
Celsius converter

Celsius converter video thumbnail
Password generator

Password generator video thumbnail

Exchange rate overview
Exchange rate overview video thumbnail
Currency converter
Currency converter video thumbnail

Go to lesson

Lesson 3: Timers and triggers

Two/three 45-minute periods

  • Begin incorporating timers to update the display of elements and trigger code.
  • Create an accurate digital clock.
  • Bring the classic higher-or-lower game to life with a full GUI
  • OPTIONAL: Challenge yourself to make a simple clicker game – how many times can you click the button in a time limit you set?
Lesson 3: Timers and triggers

Image credit: Zlouiemark45546/ Wikimedia Commons, CC BY-SA 4.0

Videos in this lesson:

Digital clock
Digital clock video thumbnail
Higher or lower
Higher or lower video thumbnail

Go to lesson

Lesson 4: Flipping images

Two/three 45-minute periods

  • Make your GUIs more dynamic by coding images on the page to change.
  • Create an interactive dice roll simulation with dice face images that change when you roll.
  • Create a dynamic data visualisation to show teaspoons of sugar in various drinks.
  • OPTIONAL: Challenge yourself to create your own dynamic data visualisation.
Lesson 4: Flipping images

Image credit: Riho Kroll/ Unsplash photo library

Videos in this lesson:

Dice roll


Dice roll video thumbnail

How much sugar: Overview


How much sugar video thumbnail

How much sugar: From the ground up

How much sugar video thumbnail

Go to lesson

Lesson 5: GUIfy my program!

Two/three 45-minute periods

  • Take the classic Heads or tails program from the original Visual To Text Coding lesson sequence and give it an animated GUI.
  • Test and analyse the code for two other classic programs converted to GUIs:
    • Heads or tails
    • Magic 8 ball
Lesson 5: GUIfy my programs!

Image credit: ICMA Photos/ Wikimedia Commons, CC BY-SA 2.0

Videos in this lesson:

Heads or tails: Overview
Heads or tails: Overview video thumbnail
Heads or tails: Get user input
Heads or tails: Get user input video thumbnail
Heads or tails: Prepare coin flip
Heads or tails: Prepare coin flip video thumbnail

Heads or tails: Flip the coin
Heads or tails: Flip the coin video thumbnail
Heads or tails: Set interval
Heads or tails: Set interval video thumbnail
Heads or tails: Swap images
Heads or tails: Swap images video thumbnail

Heads or tails: Stop coin flipping


Heads or tails: Stop coin flipping video thumbnail
Heads or tails: How long to spin a coin
Heads or tails: How long to spin a coin video thumbnail
Heads or tails: Determine a match
Heads or tails: Determine a match video thumbnail

Heads or tails: Basic styling
Heads or tails: Basic styling video thumbnail
Heads or tails: Adding scores
Heads or tails: Adding scores video thumbnail
Heads or tails: How many turns
Heads or tails: How many turns video thumbnail

Heads or tails: Better buttons
Heads or tails: Better buttons video thumbnail
Heads or tails: Google fonts
Heads or tails: Google fonts video thumbnail

Go to lesson

Project: A complete application with GUI

Minimum three 45-minute periods

  • Choose one of two defined problems or pick your own, and make a specific list of requirements for the solution.
  • Design both the GUI and main algorithm(s) for the application.
  • Develop the HTML, CSS and JavaScript to bring the application to reality.
Final project: A complete application with GUI

Image credit: Clker-Free-Vector-Images/ Pixabay

Go to lesson