Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 473 · 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.🧭 Who is helped most by semantic tags? (a) only the printer (b) only the server (c) nobody (d) screen-reader users
2. 2.True or false: <footer> holds the logo and title. (a) False (b) True
3. 3.⚖️ What colour is the text of this element?
   <h1 class="box" id="logo">Hi</h1>
   CSS:
   #logo { color: blue; }
   #logo { color: purple; } (a) orange (b) blue (c) purple (d) red
4. 4.⚡ Which JavaScript word writes in the console? (a) let (b) for (c) if (d) console.log()
5. 5.True or false: in <img>, alt is read by screen readers. (a) False (b) True
6. 6.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
7. 7.🎨 A CSS file usually ends with which extension? (a) .css (b) .html (c) .js (d) .png
8. 8.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 12; i = i + 2) {
     console.log(i);
   }
9. 9.🔗 Which words do you click on?
   <a href="quiz.html">Play games</a> (a) Play games (b) quiz.html (c) href (d) About us
10. 10.🔁 What does i++ do? (a) doubles i (b) prints i (c) takes 1 from i (d) adds 1 to i
11. 11.True or false: body { margin: 0; } goes in index.html. (a) False (b) True
12. 12.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Orange</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Jamun</td></tr>
      <tr><td>Guava</td><td>Mango</td></tr>
    </table>
13. 13.🖌️ How big is the text, in px?
    h1 {
      font-size: 40px;
      text-align: right;
      background-color: black;
      color: purple;
    }
14. 14.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    h1 { color: purple; }
    .star { color: white; }
    #top { color: green; } (a) red (b) purple (c) white (d) green
15. 15.🌗 Is blue on purple easy or hard to read? (a) easy to read (b) hard to read
16. 16.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h4> → <h5> (a) No (b) Yes
17. 17.🖌️ Which CSS property makes the text bold? (a) background-color (b) text-align (c) font-size (d) font-weight
18. 18.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 330px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
19. 19.📝 On how many lines does the browser show this paragraph?
    <p>Birds sing<br>Stars shine<br>Rivers flow<br>Roses are red<br>Sky is blue</p>
20. 20.🔠 Which heading shows the SMALLEST text: <h6>, <h1>, <h2> or <h5>? (a) <h1> (b) <h5> (c) <h2> (d) <h6>
21. 21.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) fort.jpg (b) kite.png (c) tiger.jpg (d) An old fort
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
23. 23.Which of these is a weak password? (a) 111111 (b) Kite_Fl1es@Dawn (c) Rain#Drop_42! (d) Mango#Kite29!
24. 24.True or false: <title> goes in the body. (a) True (b) False
25. 25.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h5> or <h2>? (a) <h4> (b) <h2> (c) <h6> (d) <h5>
26. 26.🏷️ Is <p> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
27. 27.🛡️ Before typing a password on a site, check the address starts with ___. (a) ftp (b) http (c) https (d) www
28. 28.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
29. 29.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 15px;
      border: 5px solid black;
      margin: 15px;
    }
30. 30.🌈 Which colour is #ff00ff? (a) bright green (b) red (c) magenta (d) black
31. 31.📋 How many items does this list show?
    <ol>
      <li>Litchi</li>
      <li>Banana</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>
32. 32.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <!-- <p>Rain today</p> -->
    <p>I love mangoes.</p>
    <p>Good morning!</p> (a) Our school trip (b) Rain today (c) Good morning! (d) I love mangoes.
33. 33.🎯 Which CSS selector matches this element?
    <span class="big" id="intro">Hello</span> (a) .red (b) #big (c) .intro (d) span
34. 34.Which of these is the content? (a) the text or picture (b) the gap to other boxes (c) space inside the border (d) a solid or dotted edge
35. 35.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center
36. 36.📄 Can HTML on its own show paragraphs? (a) Yes (b) No
37. 37.True or false: HTML on its own can keep a high score. (a) False (b) True
38. 38.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
39. 39.📝 What does <br> do? (a) makes a list (b) starts a new line (c) adds a picture (d) makes text bold
40. 40.Which of these is true of a code editor? (a) turns HTML into a page (b) shows line numbers (c) hosts websites online (d) answers page requests

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