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.📋 Which list shows the steps of a recipe best? (a) <ul> (b) <hr> (c) <br> (d) <ol>
-
2.📝 How many <input> tags are in this form?
<form>
<input type="date">
<input type="password">
<input type="checkbox">
<input type="submit" value="Send">
</form> - 3.True or false: padding is the gap round content. (a) False (b) True
- 4.🛡️ Is it safe to use the same password on every site? (a) No (b) Yes
-
5.🔗 Which words do you click on?
<a href="games.html">Contact us</a> (a) Visit the site (b) href (c) Contact us (d) games.html - 6.True or false: <footer> helps you move around. (a) True (b) False
-
7.🔗 Which address opens when you click this link?
<a href="art.html">Contact us</a> (a) art.html (b) news.html (c) quiz.html (d) Contact us -
8.🔍 One closing tag is missing. Which one?
<b>Hello, world!
<i>My pets</i>
<u>My best friend</u> (a) </h1> (b) </u> (c) </i> (d) </b> - 9.Which of these is true of a web browser? (a) answers page requests (b) colours code to help us (c) shows pages from the web (d) shows line numbers
- 10.🔁 Which loop repeats code a set number of times? (a) if (b) else (c) for (d) let
- 11.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
-
12.📦 How much space across (px) does this box take in all, margin included?
.box {
width: 190px;
padding: 5px;
border: 1px solid black;
margin: 15px;
} - 13.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <a> (d) <p>
- 14.✍️ Which sign ends each CSS declaration? (a) . (b) : (c) , (d) ;
- 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
-
16.🔗 Which words do you click on?
<a href="games.html">Art corner</a> (a) School news (b) games.html (c) href (d) Art corner -
17.📝 How many <input> tags are in this form?
<form>
<input type="number">
<input type="checkbox">
<input type="email">
<input type="text">
<input type="submit" value="Send">
</form> -
18.💪 How much empty space (px) is before the first box?
.row {
display: flex;
width: 170px;
justify-content: flex-end;
}
Inside are 2 boxes, each 60px wide (no margins). - 19.True or false: <ul> goes in the body. (a) False (b) True
-
20.💪 How much empty space (px) is before the first box?
.row {
display: flex;
width: 120px;
justify-content: flex-end;
}
Inside are 2 boxes, each 50px wide (no margins). - 21.🔠 Which heading shows the BIGGEST text: <h2>, <h1>, <h4> or <h5>? (a) <h5> (b) <h4> (c) <h1> (d) <h2>
- 22.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
-
23.📝 On how many lines does the browser show this paragraph?
<p>Stars shine<br>Birds sing<br>Roses are red</p> - 24.Which of these goes in the body? (a) <title> (b) <table> (c) <style> (d) <link rel="stylesheet">
- 25.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <body> (d) <css>
-
26.📄 What does the browser tab show for this page?
<!DOCTYPE html>
<html>
<head>
<title>Riya’s Recipes</title>
</head>
<body>
<h1>Easy snacks</h1>
<p>Mars is red.</p>
</body>
</html> (a) Mars is red. (b) Easy snacks (c) Riya’s Recipes (d) index.html -
27.✍️ What is the selector in this CSS rule?
body {
color: red;
padding: 8px;
width: 300px;
} (a) 8px (b) body (c) .box (d) color - 28.🔠 Which heading shows the BIGGEST text: <h6>, <h3>, <h4> or <h1>? (a) <h1> (b) <h6> (c) <h4> (d) <h3>
- 29.📝 What does <br> do? (a) starts a new line (b) makes text bold (c) makes a list (d) adds a picture
- 30.True or false: padding is the gap to other boxes. (a) True (b) False
- 31.🚀 Which file should this code go in: score = score + 1; (a) script.js (b) index.html (c) style.css
- 32.🌈 In #00002d the blue part is the hex number 2d. What is it as a normal number?
- 33.🌈 Which colour of light is strongest in rgb(139, 50, 167)? (a) green (b) red (c) blue
-
34.🖌️ What colour is behind the letters?
h1 {
color: black;
text-align: right;
background-color: yellow;
font-size: 28px;
} (a) green (b) black (c) yellow -
35.🔍 One closing tag is missing. Which one?
<b>My pets</b>
<strong>I love mangoes.</strong>
<small>My best friend (a) </strong> (b) </b> (c) </small> (d) </h2> - 36.📄 Can HTML on its own show paragraphs? (a) No (b) Yes
-
37.🔁 What number does this code print?
let total = 0;
for (let i = 1; i <= 9; i++) {
total = total + 8;
}
console.log(total); -
38.📝 How many paragraphs does this code make?
<p>Hello, world!</p>
<p>Fun facts</p>
<p>My best friend</p>
<h2>My pets</h2> - 39.Which of these does JavaScript do? (a) makes headings and lists (b) shows a pop-up message (c) puts a picture on a page (d) makes a link
- 40.True or false: a web browser shows line numbers. (a) False (b) True
Answer key
- <ol>
- 4
- True
- No
- Contact us
- False
- art.html
- </b>
- shows pages from the web
- for
- flex-start
- 232
- <a>
- ;
- the later one
- Art corner
- 5
- 50
- True
- 20
- <h1>
- an id selector
- 3
- <table>
- <style>
- Riya’s Recipes
- body
- <h1>
- starts a new line
- False
- script.js
- 45
- blue
- yellow
- </small>
- Yes
- 72
- 3
- shows a pop-up message
- False
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids