In the following series of tutorials we are going to develop a ball that we want to keep in a box for the longest possible time. We use the arrow keys to alter the direction of the ball.
Monthly Archives: September 2018
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.
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>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
- 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:-
<article>
<h1>HTML is boring</h1>
<p> HTML is capable of doing very little on it’s own, without Javascript and CSS</p>
</aricle>
- Refresh the browser and note the results.