Web Development Worksheet: Final Test
Code tip (Read it like a browser): Find the topic: HTML, CSS, JavaScript or how the web works. Read the code line by line, the way a browser would. For sums and loops, write each step down and check it again.
NameDateTime takenScore ___ / 40
- 1.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<head>”? (a) <!DOCTYPE html> (b) <head>
- 2.🌍 What finds the server for a domain name like example.com? (a) HTML (b) DNS (c) CSS (d) alt
-
3.📝 How many paragraphs does this code make?
<p>My pets</p>
<p>Fun facts</p>
<p>The red kite</p>
<h2>Hello, world!</h2>
<h2>Our school trip</h2>
<p>I love mangoes.</p> - 4.⚡ Which tag holds JavaScript in a page? (a) <code> (b) <js> (c) <script> (d) <style>
- 5.🌈 Which hex code is blue? (a) #000000 (b) #ffff00 (c) #0000ff (d) #ff00ff
- 6.🌈 Which colour of light is strongest in rgb(249, 84, 44)? (a) blue (b) green (c) red
- 7.🔁 When does the else part run? (a) always (b) never (c) when if is false (d) when if is true
- 8.True or false: #logo is an element selector. (a) True (b) False
- 9.True or false: in <img>, height names the picture file. (a) False (b) True
-
10.⚡ What does this code print? (Look at the quotes!)
let x = "2";
let y = 9;
console.log(x + y); (a) 29 (b) 11 (c) Error - 11.🔗 Which attribute holds the address of a link? (a) alt (b) id (c) src (d) href
-
12.✍️ What value is given to font-style in this rule?
#top {
font-style: italic;
border: 2px solid;
font-weight: bold;
background-color: yellow;
} (a) font-style (b) red (c) 20px (d) italic -
13.📋 What number does the browser show next to “Litchi”?
<ol>
<li>Jamun</li>
<li>Litchi</li>
<li>Banana</li>
<li>Papaya</li>
</ol> - 14.True or false: <nav> holds copyright notes. (a) False (b) True
- 15.🔢 In a basic web page file, which comes FIRST? (a) <html> (b) </html> (c) <!DOCTYPE html> (d) </body>
- 16.🌍 What does a web address (URL) tell the browser? (a) where the page is (b) your password (c) the page colour (d) how old you are
-
17.🔒 Is the connection to this address scrambled (encrypted)?
https://www.example.net/art/gallery.html (a) Yes (b) No - 18.💪 Which flexbox property sets space between boxes? (a) gap (b) align-items (c) display: flex (d) justify-content
- 19.🔍 Which is the odd one out? (a) sets colours and fonts (b) changes the text size (c) makes a form box (d) lays out the page
- 20.True or false: console.log(5 + 2); goes in script.js. (a) False (b) True
- 21.🌈 Which colour of light is strongest in rgb(24, 138, 174)? (a) green (b) red (c) blue
-
22.💪 How much empty space (px) is left after the last box?
.row {
display: flex;
width: 140px;
justify-content: flex-start;
}
Inside are 3 boxes, each 40px wide (no margins). -
23.⚖️ What colour is the text of this element?
<h1 class="box" id="logo">Hi</h1>
CSS:
h1 { color: purple; }
#logo { color: blue; } (a) green (b) red (c) blue (d) purple -
24.⚡ What number does this code print?
let a = 26;
let b = 9;
console.log(a + b); - 25.Which of these is an opening tag? (a) </li> (b) </p> (c) <body> (d) </title>
- 26.True or false: in <img>, src tells which image to load. (a) True (b) False
- 27.⚡ Which JavaScript word shows a pop-up box? (a) console.log() (b) if (c) let (d) alert()
-
28.🔁 How many numbers does this code print?
for (let i = 0; i < 17; i = i + 4) {
console.log(i);
} -
29.⚖️ What colour is the text of this element?
<h2 class="menu" id="main">Hi</h2>
CSS:
.menu { color: green; }
#main { color: white; } (a) green (b) blue (c) purple (d) white - 30.True or false: <ul> goes in the body. (a) False (b) True
- 31.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <h1> (c) <label> (d) <title>
- 32.🔠 Which tag is the least important heading? (a) <h3> (b) <h1> (c) <h6> (d) <p>
- 33.🌗 Is blue on purple easy or hard to read? (a) hard to read (b) easy to read
-
34.🔗 Which words do you click on?
<a href="about.html">Maths fun</a> (a) href (b) Art corner (c) Maths fun (d) about.html - 35.True or false: <caption> gives the table a title. (a) True (b) False
-
36.📝 How many paragraphs does this code make?
<p>Hello, world!</p>
<h2>I love mangoes.</h2>
<h2>Hello, world!</h2>
<p>Good morning!</p>
<p>Our school trip</p> - 37.🎯 Which element does the selector #main style? (a) <h1 class="star"> (b) <p id="logo"> (c) <p class="main"> (d) <p id="main">
- 38.📋 Which tag goes around each item of a list? (a) <p> (b) <li> (c) <ul> (d) <ol>
-
39.🔁 What does this code print?
let score = 1;
if (score >= 11) {
console.log("You win");
} else {
console.log("Play again");
} (a) Play again (b) You win -
40.🖼️ How many pixels wide is the picture drawn?
<img src="map.png" alt="Map of India" width="100">
Answer key
- <!DOCTYPE html>
- DNS
- 4
- <script>
- #0000ff
- red
- when if is false
- False
- False
- 29
- href
- italic
- 2
- False
- <!DOCTYPE html>
- where the page is
- Yes
- gap
- makes a form box
- True
- blue
- 20
- blue
- 35
- <body>
- True
- alert()
- 5
- white
- True
- <label>
- <h6>
- hard to read
- Maths fun
- True
- 3
- <p id="main">
- <li>
- Play again
- 100
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids