html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--this is a Html comment it will not show up on the run screen-->
<!--this tells the computer we are using Html-->
<!DOCTYPE html>
<!--this is our opening html tag-->
<html>
<!--this is our opening head tag where we place the title-->
<head>
<!--this is our title it will not be seen on the run screen-->
<title>Hands on Tutorial</title>
<!--this is our closing head tag-->
</head>
<!--this is our opening body tag-->
<body>
<!--this is our introduction-->
<h1>Hands on Tutorial</h1>
<h3>This will be a hands on tutorial where you will learn about HTML5 CSS and JavaScript while building your own project</h3>
Lets start first with adding the Project name to the top we will be using h1 tags placed below the opening body tag then just add your text between them.
<!--this is the first H1 tag you will use for your project name that will appear on the run screen-->
<h1>Random Animals</h1>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
body {
background-color: yellow;
}
div{
font-size:24px;
}
/* Hi i am a CSS comment you can change your background color or font size here */
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
//Hi i am a JavaScript comment
//you can add more animals here dont forget the '' and commas.
var animal= ['dog 🐕','cat 🐈','bird 🐦', 'horse 🐎','fish 🐠']
function newAnimal(){
//Dont forget to change the number below
var randomNumber=Math.floor(Math.random()*(5));
document.getElementById('animal').innerHTML=animal[randomNumber];
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run