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 colour is rgb(255, 0, 255)? (a) blue (b) bright green (c) red (d) magenta
- 2.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) ( ) (d) < >
-
3.💬 Which text will NOT show on the page?
<!-- <p>Good morning!</p> -->
<p>Hello, world!</p>
<p>Fun facts</p>
<p>My pets</p> (a) Fun facts (b) Hello, world! (c) My pets (d) Good morning! - 4.Which of these is a weak password? (a) Chai$Cup_19x (b) qwerty (c) Kite_Fl1es@Dawn (d) Rain#Drop_42!
- 5.Which of these is margin? (a) space outside the border (b) space inside the border (c) a solid or dotted edge (d) the gap round content
-
6.🔁 How many times does this code print “Hello”?
for (let i = 0; i <= 4; i++) {
console.log("Hello");
} -
7.🖌️ Where does the text sit on its line?
h1 {
background-color: black;
color: yellow;
text-align: left;
font-size: 32px;
} (a) on the right (b) on the left (c) in the middle -
8.📦 How much space across (px) does this box take in all, margin included?
.box {
width: 290px;
padding: 5px;
border: 5px solid black;
margin: 10px;
} - 9.True or false: the server shows the page to you. (a) True (b) False
- 10.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <link about.html> (c) <a src="about.html"> (d) <a alt="about.html">
- 11.🧭 Is <header> semantic or not semantic? (a) not semantic (b) semantic
- 12.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-family (d) text-align
-
13.📝 At most, how many of these can be chosen at the same time?
<form>
<input type="radio" name="colour"> Blue
<input type="radio" name="colour"> Red
<input type="radio" name="colour"> Pink
</form> -
14.💪 How much empty space (px) is before the first box?
.row {
display: flex;
width: 160px;
justify-content: center;
}
Inside are 2 boxes, each 60px wide (no margins). -
15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
p {
font-size: 20px;
}
@media (max-width: 480px) {
p {
font-size: 18px;
}
} -
16.🔗 Which words do you click on?
<a href="maths.html">Play games</a> (a) About us (b) maths.html (c) href (d) Play games - 17.🚀 What is the home page file of a website usually called? (a) index.html (b) start.js (c) home.css (d) main.png
- 18.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) border (d) margin
- 19.True or false: .menu is an id selector. (a) True (b) False
-
20.🔁 How many times does this code print “Hi”?
for (let i = 2; i <= 10; i++) {
console.log("Hi");
} - 21.What does background-color do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) picks the font style
- 22.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
- 23.🔢 On a typical page, from top to bottom, which comes LAST? (a) <nav> (b) <main> (c) <header> (d) <footer>
- 24.🔢 When you open a web page, which comes first: “DNS finds the server” or “you type the URL”? (a) DNS finds the server (b) you type the URL
- 25.🔢 When you open a web page, which comes first: “you type the URL” or “the browser asks it”? (a) you type the URL (b) the browser asks it
- 26.⚡ Which tag holds JavaScript in a page? (a) <js> (b) <code> (c) <script> (d) <style>
- 27.🔠 Which tag is the least important heading? (a) <h1> (b) <h3> (c) <p> (d) <h6>
- 28.True or false: <ul> lists steps in order. (a) True (b) False
-
29.🔁 What does this code print?
let age = 38;
if (age < 29) {
console.log("teen");
} else {
console.log("child");
} (a) child (b) teen - 30.🖼️ Which tag puts a picture on a page? (a) <img> (b) <a> (c) <pic> (d) <p>
- 31.True or false: <li> shows bullet points. (a) True (b) False
-
32.📝 On how many lines does the browser show this paragraph?
<p>Rivers flow<br>Kites fly high</p> -
33.🔗 Where does this link open?
<a href="art.html">Play games</a> (a) in the same tab (b) in a new tab - 34.🌈 Which colour is #00ff00? (a) bright green (b) red (c) cyan (d) blue
- 35.True or false: <a> goes in the body. (a) True (b) False
- 36.📦 In the box model, which part is the line round the box? (a) margin (b) padding (c) content (d) border
-
37.⚖️ What colour is the text of this element?
<h2 class="red" id="top">Hi</h2>
CSS:
#top { color: blue; }
h2 { color: orange; } (a) red (b) blue (c) yellow (d) orange - 38.📊 Which tag makes one table row? (a) <th> (b) <caption> (c) <tr> (d) <table>
- 39.🔤 In “HTML”, what does the M stand for? (a) Modern (b) Machine (c) Markup (d) Mouse
- 40.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
Answer key
- magenta
- { }
- Good morning!
- qwerty
- space outside the border
- 5
- on the left
- 330
- False
- <a href="about.html">
- semantic
- font-size
- 1
- 20
- 20
- Play games
- index.html
- padding
- False
- 9
- colours behind the text
- .
- <footer>
- you type the URL
- you type the URL
- <script>
- <h6>
- False
- child
- <img>
- False
- 2
- in the same tab
- bright green
- True
- border
- blue
- <tr>
- Markup
- in the body
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids