In this challenge you are going to use CSS to create your own digicode keypad.
Learning Objectives
By completing this challenge you will familiarise yourself with CSS pseudo-classes.
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user rolls over it.
- Style visited and unvisited hyperlinks differently.
- Style active elements (for instance when a user clicks on an element, it becomes active).
The syntax of pseudo-classes:
selector:pseudo-class {
property:value;
}
For instance to create a roll-over effect for hyperlinks:
A:hover {
color:#FF0000;
}
You can also have a pseudo-class for when a link or button is active (being clicked on):
A:active {
font-weight:bold;
}
Find out more about pseudo-classes.
Let’s see the code in practice by completing this challenge.
Your Task
Tweak the code below to create your own look & feel for your “digicode”:
See the Pen LENvrN by 101 Computing (@101Computing) on CodePen.
This challenge consists of creating a computer program that displays a random selection of 7 letters to the end-user. Each letter is given a value based on the values used in the game of Scrabble.
For this challenge we are not going to recreate a full battleship game. Instead we are going to focus on randomly placing the ships on the grid using an algorithm.
Rules of the Game
The YOLO challenge consists of creating an acronym generator: a program that prompts the user to enter an expression or a sentence (e.g. “You only live once!”) and in return gives the acronym matching the user input (e.g. “YOLO”)
Fizz buzz is a group word game for children to teach them about division. Players take turns to count incrementally, replacing any number divisible by three with the word “fizz”, and any number divisible by five with the word “buzz”.

















