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 heading shows the BIGGEST text: <h4>, <h5>, <h6> or <h2>? (a) <h6> (b) <h2> (c) <h4> (d) <h5>
- 2.⚡ Which word makes a new variable? (a) give (b) let (c) put (d) make
- 3.🚀 Where in index.html does the link to style.css go? (a) after </html> (b) in the footer (c) inside a <p> (d) in the head
-
4.🖼️ The picture cannot load. Which text does the browser show instead?
<img src="map.png" alt="Map of India" width="350"> (a) Birthday cake (b) map.png (c) width (d) Map of India - 5.🔗 Which attribute holds the address of a link? (a) src (b) alt (c) id (d) href
- 6.🔁 Which word runs code only when something is true? (a) let (b) for (c) log (d) if
-
7.⚡ What does this code print? (Look at the quotes!)
let x = "6";
let y = 3;
console.log(x + y); (a) 9 (b) Error (c) 63 - 8.📋 Which tag goes around each item of a list? (a) <p> (b) <ol> (c) <li> (d) <ul>
- 9.🔢 When you open a web page, what comes right after “the browser asks it”? (a) the server sends files (b) DNS finds the server (c) you type the URL (d) the browser shows it
-
10.📋 How many items does this list show?
<ul>
<li>Litchi</li>
<li>Banana</li>
<li>Orange</li>
</ul> - 11.True or false: <a> goes in the head. (a) True (b) False
- 12.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
- 13.📊 In a table, which tag is a row? (a) <th> (b) <tb> (c) <td> (d) <tr>
- 14.📝 What does <br> do? (a) starts a new line (b) adds a picture (c) makes text bold (d) makes a list
- 15.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
- 16.🔢 To build and share your first web page, which comes first: “plan what to show” or “publish it online”? (a) plan what to show (b) publish it online
-
17.🔍 One closing tag is missing. Which one?
<p>Fun facts</p>
<strong>Cricket is fun.</strong>
<h2>My pets (a) </p> (b) </h2> (c) </u> (d) </strong> - 18.🎯 What kind of selector is #main? (a) an id selector (b) a class selector (c) an element selector
- 19.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
- 20.🔠 Which heading shows the BIGGEST text: <h3>, <h4>, <h6> or <h2>? (a) <h4> (b) <h6> (c) <h3> (d) <h2>
- 21.🛡️ Online: is it safe to keep passwords secret? (a) not safe (b) safe
-
22.🔗 Where does this link open?
<a href="art.html" target="_blank">Play games</a> (a) in a new tab (b) in the same tab - 23.🌍 Which one stores the site’s files? (a) the URL (b) the server (c) the browser (d) HTTPS
- 24.True or false: <table> holds the whole table. (a) True (b) False
-
25.📝 How many paragraphs does this code make?
<p>My pets</p>
<h2>Our school trip</h2>
<h2>Fun facts</h2> - 26.📄 Where does the text of <title> appear? (a) in a big heading (b) nowhere (c) on the browser tab (d) at the bottom
-
27.🖌️ How big is the text, in px?
li {
background-color: black;
text-align: left;
color: red;
font-size: 16px;
} - 28.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
-
29.📊 How many heading cells (<th>) does this table have?
<table>
<tr><th>Name</th><th>Fruit</th></tr>
<tr><td>Grapes</td><td>Litchi</td></tr>
</table> -
30.🔁 How many numbers does this code print?
for (let i = 0; i < 5; i = i + 3) {
console.log(i);
} - 31.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 100 (d) 255
- 32.🔐 Is riya2014 a strong or a weak password? (a) strong (b) weak
- 33.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
- 34.🔗 What does target="_blank" do to a link? (a) makes it blank (b) hides the link (c) opens it in a new tab (d) makes it bold
- 35.🏷️ Every HTML tag starts with which sign? (a) { (b) < (c) ( (d) [
-
36.🖼️ The picture cannot load. Which text does the browser show instead?
<img src="fort.jpg" alt="An old fort" width="250"> (a) width (b) An old fort (c) fort.jpg (d) A tiger asleep -
37.💬 How many paragraphs show on the page?
<p>Hello, world!</p>
<p>I love mangoes.</p>
<p>Our school trip</p>
<!-- <p>Good morning!</p> -->
<p>Fun facts</p> - 38.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) publish it online (b) write the HTML (c) test in a browser (d) add CSS styles
-
39.⚖️ What colour is the text of this element?
<p class="box" id="hero">Hi</p>
CSS:
.box { color: red; }
.box { color: yellow; } (a) blue (b) red (c) white (d) yellow - 40.True or false: <p>Hello!</p> goes in style.css. (a) True (b) False
Answer key
- <h2>
- let
- in the head
- Map of India
- href
- if
- 63
- <li>
- the server sends files
- 3
- False
- in the head
- <tr>
- starts a new line
- a class selector
- plan what to show
- </h2>
- an id selector
- justify-content
- <h2>
- safe
- in a new tab
- the server
- True
- 1
- on the browser tab
- 16
- the later one
- 2
- 2
- 255
- weak
- an element selector
- opens it in a new tab
- <
- An old fort
- 4
- write the HTML
- yellow
- False
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids