Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 674 · 40 questions

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.🔠 Are headings shown in bold by default? (a) Yes (b) No
2.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) center (d) space-between
3.📄 What is the big heading shown on this page?
<!DOCTYPE html>
<html>
<head>
  <title>Art Gallery</title>
</head>
<body>
  <h1>Welcome!</h1>
  <p>I like to read.</p>
</body>
</html> (a) I like to read. (b) Art Gallery (c) Welcome! (d) body
4.Which of these is true of a web server? (a) is where we type code (b) stores a website’s files (c) colours code to help us (d) opens web pages for us
5.📋 What number does the browser show next to “Papaya”?
<ol>
  <li>Mango</li>
  <li>Grapes</li>
  <li>Jamun</li>
  <li>Banana</li>
  <li>Papaya</li>
  <li>Guava</li>
</ol>
6.📱 The screen is 820px wide. Does the rule inside @media apply?
p {
  font-size: 12px;
}
@media (max-width: 600px) {
  p {
    font-size: 10px;
  }
} (a) Yes (b) No
7.🔗 Which words do you click on?
<a href="quiz.html">About us</a> (a) Contact us (b) href (c) About us (d) quiz.html
8.True or false: JavaScript makes a form box. (a) False (b) True
9.📊 How many cells does this table have in all?
<table>
  <tr><td>Orange</td><td>Papaya</td><td>Orange</td></tr>
  <tr><td>Guava</td><td>Orange</td><td>Mango</td></tr>
  <tr><td>Grapes</td><td>Banana</td><td>Mango</td></tr>
  <tr><td>Grapes</td><td>Banana</td><td>Orange</td></tr>
</table>
10.🖌️ Which CSS property centres a heading? (a) font-family (b) text-align (c) background-color (d) font-size
11.Which of these is a strong password? (a) iloveyou (b) S0lar!Pen#8 (c) riya2014 (d) 111111
12.⚡ What number does this code print?
let a = 36;
let b = 8;
console.log(a - b);
13.Which of these is not safe to do online? (a) tell a trusted adult (b) keep passwords secret (c) use a nickname in games (d) post your home address
14.🏷️ Every HTML tag starts with which sign? (a) [ (b) { (c) ( (d) <
15.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
.box {
  width: 300px;
  padding: 25px;
  border: 5px solid black;
  margin: 5px;
}
16.🖼️ How many pixels wide is the picture drawn?
<img src="tiger.jpg" alt="A tiger asleep" width="300">
17.🔁 What does this code print?
let score = 2;
if (score > 6) {
console.log("You win");
} else {
console.log("Play again");
} (a) You win (b) Play again
18.🌈 Which colour of light is strongest in rgb(176, 119, 92)? (a) green (b) red (c) blue
19.📋 How many items does this list show?
<ul>
<li>Papaya</li>
<li>Grapes</li>
</ul>
20.🎯 Which sign starts a class selector? (a) . (b) @ (c) & (d) #
21.🔢 To build and share your first web page, which comes FIRST? (a) add CSS styles (b) plan what to show (c) test in a browser (d) write the HTML
22.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is fast (b) the data is scrambled (c) the site is free (d) the site is a game
23.🔗 Which address opens when you click this link?
<a href="contact.html">School news</a> (a) https://example.com (b) maths.html (c) contact.html (d) School news
24.🔁 What does this code print?
let temp = 50;
if (temp < 31) {
console.log("Hot");
} else {
console.log("Cool");
} (a) Hot (b) Cool
25.Which of these is an empty tag? (a) <p> (b) <title> (c) <img> (d) <b>
26.🌈 Which colour of light is strongest in rgb(50, 204, 23)? (a) green (b) red (c) blue
27.📝 How many paragraphs does this code make?
<p>Hello, world!</p>
<p>The red kite</p>
<p>The red kite</p>
<p>Our school trip</p>
<p>Our school trip</p>
<h2>Our school trip</h2>
28.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h5> (b) <h6> (c) <h1> (d) <h3>
29.True or false: in <img>, src names the picture file. (a) False (b) True
30.🔁 How many times does this code print “Hello”?
for (let i = 0; i <= 7; i++) {
console.log("Hello");
}
31.♿ What does good colour contrast mean? (a) many bright colours (b) text stands out clearly (c) no colours at all (d) only red text
32.🔍 Which is the odd one out? (a) turns HTML into a page (b) shows pages from the web (c) opens web pages for us (d) is where we type code
33.💬 Which text will NOT show on the page?
<p>The red kite</p>
<p>Hello, world!</p>
 (a) Hello, world! (b) My pets (c) The red kite
34.💬 Which text will NOT show on the page?
<p>My best friend</p>
<p>I love mangoes.</p>

<p>Cricket is fun.</p> (a) Rain today (b) Cricket is fun. (c) My best friend (d) I love mangoes.
35.🖼️ Why do we add alt text to an image? (a) to make it bigger (b) to colour it (c) to load it faster (d) to describe the image
36.⚖️ What colour is the text of this element?
<h2 class="box" id="intro">Hi</h2>
CSS:
.box { color: black; }
h2 { color: white; }
#intro { color: green; } (a) white (b) black (c) green (d) purple
37.✍️ Which property is set to 8px in this rule?
p {
  padding: 8px;
  font-size: 20px;
  font-weight: bold;
} (a) font-weight (b) 8px (c) padding (d) border
38.✍️ Which property is set to 20px in this rule?
.note {
  font-size: 20px;
  width: 300px;
  text-align: center;
  padding: 8px;
} (a) background-color (b) text-align (c) 20px (d) font-size
39.Which of these does HTML do? (a) adds space around boxes (b) shows a pop-up message (c) checks a quiz answer (d) gives the page structure
40.True or false: <li> shows 1, 2, 3 numbers. (a) True (b) False

Answer key

Yes
flex-start
Welcome!
stores a website’s files
5
No
About us
False
12
text-align
S0lar!Pen#8
28
post your home address
<
360
300
Play again
red
2
.
plan what to show
the data is scrambled
contact.html
Cool
<img>
green
5
<h3>
True
8
text stands out clearly
is where we type code
My pets
Rain today
to describe the image
green
padding
font-size
gives the page structure
False

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids