Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 27 · 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.

1. 1.✍️ Which property is set to bold in this rule?
   #top {
     font-weight: bold;
     font-size: 20px;
   } (a) font-weight (b) bold (c) border (d) width
2. 2.🔗 Which tag makes a clickable link? (a) <link> (b) <a> (c) <img> (d) <p>
3. 3.🖌️ What colour are the letters?
   h1 {
     font-size: 24px;
     background-color: purple;
     text-align: left;
     color: green;
   } (a) green (b) orange (c) purple
4. 4.🎯 Which element does the selector div style? (a) <h1 id="top"> (b) <div class="box"> (c) <p class="box"> (d) <span>
5. 5.True or false: the browser sends the page back. (a) False (b) True
6. 6.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 8; i++) {
     total = total + i;
   }
   console.log(total);
7. 7.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 20; i = i + 2) {
     console.log(i);
   }
8. 8.Which of these is a closing tag? (a) <title> (b) <p> (c) </h1> (d) <body>
9. 9.💬 How many paragraphs show on the page?
   <!-- <p>Fun facts</p> -->
   <p>Rain today</p>
   <!-- <p>Hello, world!</p> -->
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
11. 11.🔗 Which address opens when you click this link?
    <a href="news.html">About us</a> (a) games.html (b) About us (c) quiz.html (d) news.html
12. 12.🌈 Which colour is #ff0000? (a) black (b) blue (c) red (d) yellow
13. 13.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 15px;
      border: 1px solid black;
      margin: 5px;
    }
15. 15.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
16. 16.True or false: to tell a trusted adult is safe. (a) True (b) False
17. 17.Which of these does JavaScript do? (a) changes the text size (b) checks a quiz answer (c) lays out the page (d) makes a link
18. 18.True or false: HTML on its own can add pictures to a page. (a) True (b) False
19. 19.🎯 Which element does the selector span style? (a) <p> (b) <h1 class="note"> (c) <h2 id="logo"> (d) <span class="note">
20. 20.🏷️ What does a closing tag have that an opening tag does not? (a) a dot . (b) a dollar $ (c) a slash / (d) a hash #
21. 21.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: red; }
    #end { color: green; } (a) purple (b) blue (c) green (d) red
22. 22.💬 How does an HTML comment start? (a) # (b) <!-- (c) /* (d) //
23. 23.🌈 Which hex code is yellow? (a) #ffff00 (b) #00ff00 (c) #ffffff (d) #000000
24. 24.📄 Where does the text of <title> appear? (a) in a big heading (b) on the browser tab (c) at the bottom (d) nowhere
25. 25.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <!-- <p>My best friend</p> -->
    <p>Fun facts</p> (a) My best friend (b) Good morning! (c) Fun facts
26. 26.✍️ Which property is set to 20px in this rule?
    body {
      font-size: 20px;
      width: 300px;
      border: 2px solid;
    } (a) background-color (b) font-size (c) 20px (d) text-align
27. 27.🌍 What is the path in this URL?
    http://school.example.in/about.html (a) school.example.in (b) /about.html (c) /maths/tables.html (d) http
28. 28.📋 What number does the browser show next to “Papaya”?
    <ol>
      <li>Litchi</li>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ol>
29. 29.💬 Which text will NOT show on the page?
    <p>Hello, world!</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Rain today</p>
    <p>My pets</p> (a) I love mangoes. (b) Rain today (c) My pets (d) Hello, world!
30. 30.🖌️ What colour are the letters?
    li {
      background-color: orange;
      color: purple;
      font-size: 24px;
      text-align: center;
    } (a) orange (b) yellow (c) purple
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 240px;
      padding: 10px;
      border: 5px solid black;
      margin: 0px;
    }
32. 32.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) height (c) src (d) width
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
34. 34.True or false: a code editor sends pages over the net. (a) False (b) True
35. 35.Which of these is not safe to do online? (a) type a password on http (b) tell a trusted adult (c) ask before downloading (d) think before you post
36. 36.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “</html>”? (a) <!DOCTYPE html> (b) </html>
37. 37.🎯 Which element does the selector .box style? (a) <p class="star"> (b) <h1 class="menu"> (c) <p class="box"> (d) <p id="box">
38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="150"> (a) Our school bus (b) width (c) moon.png (d) The full moon
39. 39.🔢 When you open a web page, what comes right after “the server sends files”? (a) DNS finds the server (b) the browser asks it (c) you type the URL (d) the browser shows it
40. 40.💬 How many paragraphs show on the page?
    <!-- <p>The red kite</p> -->
    <!-- <p>Our school trip</p> -->
    <!-- <p>My pets</p> -->
    <!-- <p>Fun facts</p> -->
    <p>Good morning!</p>

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