Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 489 · 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.🧭 Which semantic tag holds the main content? (a) <nav> (b) <main> (c) <article> (d) <aside>
2.⚡ What number does this code print?
let apples = 12;
apples = apples + 3;
apples = apples - 11;
console.log(apples);
3.📦 How much space top to bottom (px) does this box take in all, margin included?
.box {
  height: 80px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
}
4.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
5.⚡ What number does this code print?
let a = 38;
let b = 11;
console.log(a + b);
6.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) style.css (b) index.html (c) script.js
7.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
8.📊 How many cells are in each row?
<table>
  <tr><td>Mango</td><td>Banana</td></tr>
  <tr><td>Jamun</td><td>Litchi</td></tr>
  <tr><td>Banana</td><td>Grapes</td></tr>
  <tr><td>Banana</td><td>Papaya</td></tr>
</table>
9.🔗 What does target="_blank" do to a link? (a) hides the link (b) opens it in a new tab (c) makes it bold (d) makes it blank
10.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to colour it (c) to describe the image (d) to make it bigger
11.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <a> (c) <img> (d) <p>
12.📝 At most, how many of these can be chosen at the same time?
<form>
  <input type="checkbox" name="fruit"> Papaya
  <input type="checkbox" name="fruit"> Guava
  <input type="checkbox" name="fruit"> Litchi
  <input type="checkbox" name="fruit"> Banana
</form>
13.💬 How many paragraphs show on the page?

<p>The red kite</p>
<p>My pets</p>
<p>Rain today</p>
14.📱 The screen is 1100px wide. Does the rule inside @media apply?
p {
  font-size: 24px;
}
@media (min-width: 600px) {
  p {
    font-size: 32px;
  }
} (a) Yes (b) No
15.🏷️ Is </b> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
16.📊 How many cells are in each row?
<table>
  <tr><td>Jamun</td><td>Papaya</td><td>Jamun</td><td>Mango</td></tr>
  <tr><td>Orange</td><td>Orange</td><td>Jamun</td><td>Papaya</td></tr>
  <tr><td>Jamun</td><td>Jamun</td><td>Grapes</td><td>Guava</td></tr>
</table>
17.💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 200px;
  justify-content: flex-start;
}
Inside are 2 boxes, each 80px wide (no margins).
18.True or false: the server stores the site’s files. (a) True (b) False
19.🔁 Which loop repeats code a set number of times? (a) if (b) for (c) let (d) else
20.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
21.💬 Which text will NOT show on the page?
<p>Good morning!</p>
<p>Our school trip</p>
 (a) Good morning! (b) Rain today (c) Our school trip
22.True or false: margin is space outside the border. (a) False (b) True
23.💬 Why do coders write comments? (a) to show pictures (b) to leave notes (c) to add colour (d) to make links
24.📄 What does the browser tab show for this page?
<!DOCTYPE html>
<html>
<head>
  <title>Class 7 Blog</title>
</head>
<body>
  <h1>Easy snacks</h1>
  <p>I like to read.</p>
</body>
</html> (a) Easy snacks (b) Class 7 Blog (c) index.html (d) I like to read.
25.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .css (c) .js (d) .jpg
26.✍️ Which property is set to red in this rule?
h1 {
  font-style: italic;
  background-color: yellow;
  font-size: 20px;
  color: red;
} (a) red (b) color (c) text-align (d) font-size
27.🖌️ Where does the text sit on its line?
h1 {
  font-size: 12px;
  color: orange;
  text-align: right;
  background-color: white;
} (a) in the middle (b) on the right (c) on the left
28.Which of these is a strong password? (a) riya2014 (b) Rain#Drop_42! (c) 123456 (d) password
29.♿ A part of the page is under a <h2> heading. Which tag should its sub-heading use? (a) <h3> (b) <h5> (c) <h4> (d) <h1>
30.✍️ Which property is set to center in this rule?
.box {
margin: 10px;
text-align: center;
} (a) background-color (b) center (c) margin (d) text-align
31.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) changes the text size (d) makes a link
32.🖼️ The picture cannot load. Which text does the browser show instead?
<img src="tiger.jpg" alt="A tiger asleep" width="250"> (a) tiger.jpg (b) width (c) A red kite (d) A tiger asleep
33.💪 How much empty space (px) is before the first box?
.row {
  display: flex;
  width: 280px;
  justify-content: center;
}
Inside are 2 boxes, each 60px wide (no margins).
34.True or false: <h1> goes in the head. (a) True (b) False
35.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
36.🌐 Which one colours code to help us? (a) a code editor (b) a web server (c) a web browser
37.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) the gap round content
38.🔍 One closing tag is missing. Which one?
<h1>Hello, world!
<small>My pets</small>
<p>The red kite</p> (a) </h2> (b) </small> (c) </p> (d) </h1>
39.📱 The screen is 1366px wide. Does the rule inside @media apply?
p {
  font-size: 16px;
}
@media (min-width: 768px) {
  p {
    font-size: 24px;
  }
} (a) No (b) Yes
40.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) margin (d) content

Answer key

<main>
4
134
an id selector
49
style.css
Yes
2
opens it in a new tab
to describe the image
<img>
4
3
Yes
a closing tag
4
40
True
for
an id selector
Rain today
True
to leave notes
Class 7 Blog
.js
color
on the right
Rain#Drop_42!
<h3>
text-align
changes the text size
A tiger asleep
80
False
blue
a code editor
a solid or dotted edge
</h1>
Yes
margin

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