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 one stores the site’s files? (a) the browser (b) HTTPS (c) the URL (d) the server
- 2.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 255 (d) 100
- 3.True or false: <input type="email"> is for an email address. (a) False (b) True
- 4.True or false: <nav> holds the main content. (a) True (b) False
-
5.✍️ How many declarations (property: value pairs) are in this rule?
li {
font-size: 20px;
padding: 8px;
color: red;
font-weight: bold;
} - 6.🛡️ Is it safe to use the same password on every site? (a) No (b) Yes
-
7.📊 How many cells are in each row?
<table>
<tr><td>Litchi</td><td>Guava</td><td>Papaya</td></tr>
<tr><td>Orange</td><td>Papaya</td><td>Mango</td></tr>
<tr><td>Banana</td><td>Guava</td><td>Litchi</td></tr>
</table> -
8.✍️ What is the selector in this CSS rule?
h1 {
width: 300px;
text-align: center;
} (a) p (b) h1 (c) width (d) center - 9.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to load it faster (c) to colour it (d) to make it bigger
- 10.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
-
11.📱 The screen is 414px wide. Does the rule inside @media apply?
p {
font-size: 12px;
}
@media (min-width: 600px) {
p {
font-size: 20px;
}
} (a) Yes (b) No - 12.Which of these goes in the head? (a) <meta charset="utf-8"> (b) <h1> (c) <a> (d) <ul>
- 13.🏷️ Which is the closing tag for <p>? (a) <\p> (b) </p> (c) <p> (d) <p/>
- 14.True or false: .menu is an id selector. (a) True (b) False
- 15.Which of these is an opening tag? (a) </li> (b) </title> (c) </b> (d) <p>
-
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: 170px;
padding: 5px;
border: 3px solid black;
margin: 5px;
} - 17.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
- 18.🔢 To build and share your first web page, what comes right after “plan what to show”? (a) add CSS styles (b) publish it online (c) write the HTML (d) test in a browser
- 19.🔐 Is Blue@Tiger_74 a strong or a weak password? (a) weak (b) strong
- 20.What is <input type="date"> for? (a) picks a day (b) sends the form (c) lets you tick many (d) lets you pick only one
- 21.🚀 Which file should this code go in: score = score + 1; (a) style.css (b) index.html (c) script.js
-
22.📋 What number does the browser show next to “Grapes”?
<ol start="9">
<li>Banana</li>
<li>Jamun</li>
<li>Guava</li>
<li>Grapes</li>
</ol> - 23.🌈 In #5a0000 the red part is the hex number 5a. What is it as a normal number?
- 24.🌗 Is dark grey on white easy or hard to read? (a) easy to read (b) hard to read
- 25.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <ul> (c) <style> (d) <link rel="stylesheet">
- 26.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the title tag (d) the hr tag
-
27.🎯 Which CSS selector matches this element?
<h1 class="big" id="top">Hello</h1> (a) h1 (b) #intro (c) .red (d) h2 - 28.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) is only for laptops (d) never changes
-
29.✍️ Which property is set to 8px in this rule?
h1 {
padding: 8px;
color: red;
margin: 10px;
} (a) 8px (b) border (c) padding (d) font-weight - 30.True or false: to click prize links is not safe. (a) True (b) False
- 31.True or false: HTML on its own cannot add pictures to a page. (a) True (b) False
-
32.⚡ What number does this code print?
let a = 8;
let b = 7;
console.log(a - b); - 33.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) content (d) margin
- 34.🚀 Which file should this code go in: h1 { font-size: 32px; } (a) style.css (b) index.html (c) script.js
- 35.🧭 Who is helped most by semantic tags? (a) only the printer (b) screen-reader users (c) nobody (d) only the server
- 36.⚡ Which word makes a new variable? (a) put (b) give (c) let (d) make
- 37.🔐 Is abcd1234 a strong or a weak password? (a) weak (b) strong
- 38.🌐 Which one has an address bar? (a) a code editor (b) a web browser (c) a web server
-
39.📋 How many items does this list show?
<ol>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
<li>Jamun</li>
<li>Litchi</li>
<li>Papaya</li>
</ol> - 40.⚡ Which JavaScript word repeats code? (a) for (b) console.log() (c) let (d) if
Answer key
- the server
- 255
- True
- False
- 4
- No
- 3
- h1
- to describe the image
- an element selector
- No
- <meta charset="utf-8">
- </p>
- False
- <p>
- 186
- packs boxes at the end
- write the HTML
- strong
- picks a day
- script.js
- 12
- 90
- easy to read
- <ul>
- the viewport meta tag
- h1
- fits every screen
- padding
- True
- False
- 1
- padding
- style.css
- screen-reader users
- let
- weak
- a web browser
- 6
- for
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids