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.🔍 One closing tag is missing. Which one?
<h1>Rain today
<strong>Our school trip</strong>
<h3>I love mangoes.</h3> (a) </h3> (b) </strong> (c) </b> (d) </h1> - 2.🌍 Which one scrambles data on its way? (a) HTTPS (b) the URL (c) the browser (d) the server
-
3.🌍 What is the path in this URL?
http://kids.example.org/news/today.html (a) /games/chess.html (b) kids.example.org (c) http (d) /news/today.html - 4.⚡ Which JavaScript word writes in the console? (a) console.log() (b) alert() (c) let (d) for
- 5.📄 What is the first line of an HTML5 page? (a) <body> (b) <head> (c) <html> (d) <!DOCTYPE html>
- 6.📊 Which tag holds the whole table? (a) <td> (b) <table> (c) <tr> (d) <caption>
-
7.📝 On how many lines does the browser show this paragraph?
<p>Kites fly high<br>Sky is blue</p> -
8.🖌️ What colour are the letters?
p {
color: black;
background-color: orange;
font-size: 36px;
text-align: center;
} (a) orange (b) blue (c) black - 9.📋 Which list tag is an ordered list? (a) <ul> (b) <li> (c) <ol>
-
10.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
height: 130px;
padding: 25px;
border: 4px solid black;
margin: 5px;
} - 11.🧭 Which semantic tag holds copyright notes? (a) <footer> (b) <article> (c) <aside> (d) <main>
-
12.🌍 What is the domain name in this URL?
https://www.example.com/maths/tables.html (a) www.example.com (b) https (c) /maths/tables.html (d) kids.example.org - 13.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <footer> (b) <header> (c) <main>
- 14.🔤 In “HTML”, what does the L stand for? (a) Link (b) Laptop (c) Line (d) Language
-
15.🎯 Which CSS selector matches this element?
<p class="big" id="hero">Hello</p> (a) .hero (b) #hero (c) #big (d) h1 -
16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
width: 130px;
padding: 20px;
border: 4px solid black;
margin: 0px;
} - 17.🏷️ Every HTML tag starts with which sign? (a) [ (b) { (c) ( (d) <
- 18.Which of these goes in the head? (a) <table> (b) <meta charset="utf-8"> (c) <img> (d) <a>
-
19.💪 How much empty space (px) is before the first box?
.row {
display: flex;
width: 360px;
justify-content: center;
}
Inside are 3 boxes, each 80px wide (no margins). - 20.Which of these does CSS do? (a) changes the page live (b) shows a pop-up message (c) sets colours and fonts (d) counts down a timer
- 21.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) white (d) green
-
22.🔍 Which line is missing its closing tag?
line 1: <i>Hello, world!
line 2: <h2>Rain today</h2>
line 3: <small>Good morning!</small> (a) line 1 (b) line 3 (c) line 2 -
23.⚖️ What colour is the text of this element?
<h2 class="box" id="logo">Hi</h2>
CSS:
.box { color: blue; }
.box { color: green; } (a) purple (b) green (c) white (d) blue - 24.True or false: <img src="cat.png"> goes in index.html. (a) False (b) True
- 25.🧭 Which semantic tag sits at the very top? (a) <aside> (b) <nav> (c) <article> (d) <header>
- 26.📦 In the box model, which part is the line round the box? (a) content (b) border (c) padding (d) margin
-
27.💬 Which text will NOT show on the page?
<!-- <p>My best friend</p> -->
<p>Rain today</p>
<p>Fun facts</p> (a) My best friend (b) Fun facts (c) Rain today - 28.📊 Which tag makes one data cell? (a) <caption> (b) <table> (c) <td> (d) <tr>
-
29.✍️ How many declarations (property: value pairs) are in this rule?
body {
margin: 10px;
color: red;
} - 30.🔠 Which heading shows the SMALLEST text: <h2>, <h1>, <h4> or <h5>? (a) <h5> (b) <h2> (c) <h1> (d) <h4>
-
31.📝 How many <input> tags are in this form?
<form>
<input type="password">
<input type="date">
<input type="submit" value="Send">
</form> -
32.⚖️ What colour is the text of this element?
<h2 class="note" id="end">Hi</h2>
CSS:
.note { color: blue; }
#end { color: purple; }
h2 { color: red; } (a) yellow (b) blue (c) red (d) purple - 33.📝 Which input type takes only numbers? (a) radio (b) number (c) email (d) text
- 34.🌈 In #000002 the blue part is the hex number 02. What is it as a normal number?
- 35.True or false: JavaScript makes a link. (a) True (b) False
-
36.⚡ What number does this code print?
let a = 2;
let b = 5;
console.log(a * b); -
37.📊 How many rows does this table have?
<table>
<tr><td>Litchi</td><td>Grapes</td></tr>
<tr><td>Mango</td><td>Mango</td></tr>
<tr><td>Jamun</td><td>Litchi</td></tr>
</table> -
38.⚖️ What colour is the text of this element?
<p class="star" id="logo">Hi</p>
CSS:
#logo { color: yellow; }
#logo { color: blue; } (a) blue (b) yellow (c) black (d) purple -
39.🔍 Which line is missing its closing tag?
line 1: <h1>Cricket is fun.</h1>
line 2: <b>My best friend</b>
line 3: <strong>Hello, world! (a) line 2 (b) line 1 (c) line 3 -
40.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
p {
font-size: 16px;
}
@media (max-width: 1024px) {
p {
font-size: 14px;
}
}
Answer key
- </h1>
- HTTPS
- /news/today.html
- console.log()
- <!DOCTYPE html>
- <table>
- 2
- black
- <ol>
- 198
- <footer>
- www.example.com
- <main>
- Language
- #hero
- 178
- <
- <meta charset="utf-8">
- 60
- sets colours and fonts
- blue
- line 1
- green
- True
- <header>
- border
- My best friend
- <td>
- 2
- <h5>
- 3
- purple
- number
- 2
- False
- 10
- 3
- blue
- line 3
- 14
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids