Front-end Tutorial 1 – Level 5

The next series of tutorials we will be spending to create the famous snakes games.

These are the functional requirements:-

  • The snake goes on devouring new blocks that increase his size.
  • The more blocks that he devours, the more score that the user will get and the more difficult it would become to manoeuvre on the screen.
  • If the snake hits the side of the screen, game will be over and the snake would be dead.
  •  There are three difficulty levels: Easy, Medium and Hard: the difference being the speed the snake moves.
  • The initial high score is 1000 and as the user plays, the score gets altered with the highest score achieved.

snakes game

New words for you:-

Functional Requirements: These are the requirements that specify how the program/website is supposed to behave. These specify the normal interactions with the website and how the program will respond.

Non-functional Requirements: These are the requirements that the user will not directly see, however, it affects his overall satisfaction in the website. Examples including performance and security.

Front-end Tutorial 1 – Level 0

Build an html document.

  • Open a text editor like notepad, text edit or vi.
  • Copy and paste the following code into it.

<!DOCTYPE html>
<title> </title>

  • Name the file: HelloWhatsapp.html. If you are using windows, make sure that it doesn’t rename the file to HelloWhatsapp.html.txt. Make sure that you unhide file extensions in the folder options.

Technical Background: This is HTML 5 syntax

This is HTML structure

Structured as tags. <start-tag></start-tag>. If you don’t end the start tag with the same end tag, browsers will interrogate you!


  • Open the file using your favourite internet browser.
  • Change the title to “Hello Whatsapp” and save the file.
  • Note the title change in the browser after you refresh the browser.
  • In the body type in the following:-


<h1>HTML is boring</h1>

<p> HTML is capable of doing very little on it’s own, without Javascript and CSS</p>


  • Refresh the browser and note the results.