Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 220 · 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.True or false: a code editor shows line numbers. (a) False (b) True
2. 2.📝 What does <hr> draw? (a) a table (b) a picture (c) a line across the page (d) a link
3. 3.📊 Which tag holds the whole table? (a) <th> (b) <table> (c) <caption> (d) <tr>
4. 4.🔁 How many numbers does this code print?
   for (let i = 0; i < 19; i = i + 3) {
     console.log(i);
   }
5. 5.🛡️ Online: is it safe to share your password? (a) safe (b) not safe
6. 6.True or false: <nav> helps you move around. (a) True (b) False
7. 7.📊 Which tag makes a heading cell? (a) <th> (b) <td> (c) <table> (d) <caption>
8. 8.🏷️ What does a closing tag have that an opening tag does not? (a) a dollar $ (b) a slash / (c) a hash # (d) a dot .
9. 9.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
10. 10.⚡ What does this code show?
    let name = "Aman";
    console.log("Hello, " + name + "!"); (a) Aman (b) Hello, name! (c) Hello, Aman! (d) name
11. 11.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Papaya</td><td>Grapes</td><td>Jamun</td><td>Banana</td></tr>
    </table>
12. 12.💬 How many paragraphs show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>Hello, world!</p>
    <p>I love mangoes.</p>
13. 13.True or false: “use big enough text” helps everyone use the page. (a) True (b) False
14. 14.🔗 Which address opens when you click this link?
    <a href="contact.html">About us</a> (a) maths.html (b) About us (c) contact.html (d) https://example.com
15. 15.True or false: <caption> makes a heading cell. (a) False (b) True
16. 16.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
17. 17.🖌️ How big is the text, in px?
    li {
      text-align: right;
      background-color: yellow;
      font-size: 32px;
      color: blue;
    }
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
19. 19.True or false: CSS changes the text size. (a) False (b) True
20. 20.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="300">
21. 21.True or false: the server sends the page back. (a) False (b) True
22. 22.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h1> (c) <h6> (d) <p>
23. 23.📄 Where does <style> go: in the head or in the body? (a) in the body (b) in the head
24. 24.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <p>My best friend</p>
    <h2>My pets</h2>
    <p>Rain today</p>
25. 25.True or false: the border is a solid or dotted edge. (a) False (b) True
26. 26.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 7; i++) {
      total = total + 9;
    }
    console.log(total);
27. 27.🎯 What kind of selector is p? (a) an element selector (b) an id selector (c) a class selector
28. 28.Which of these is an opening tag? (a) <b> (b) </b> (c) </p> (d) </h1>
29. 29.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 10px;
      border: 1px solid black;
      margin: 15px;
    }
30. 30.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
31. 31.📋 Does this list show bullets or numbers?
    <ul>
      <li>Jamun</li>
      <li>Guava</li>
    </ul> (a) bullets (b) numbers
32. 32.✍️ What is the selector in this CSS rule?
    body {
      padding: 8px;
      background-color: yellow;
      width: 300px;
      text-align: center;
    } (a) padding (b) body (c) yellow (d) .box
33. 33.True or false: <title> has a closing tag. (a) False (b) True
34. 34.Which of these is a closing tag? (a) </p> (b) <body> (c) <b> (d) <p>
35. 35.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    #main { color: blue; }
    #main { color: red; } (a) yellow (b) blue (c) green (d) red
36. 36.🌈 Which colour is #ff00ff? (a) yellow (b) bright green (c) cyan (d) magenta
37. 37.📋 How many items does this list show?
    <ol>
      <li>Litchi</li>
      <li>Grapes</li>
      <li>Jamun</li>
    </ol>
38. 38.⚡ What does this code print? (Look at the quotes!)
    let x = "2";
    let y = 1;
    console.log(x + y); (a) 21 (b) 3 (c) Error
39. 39.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 4;
    console.log(x + y); (a) 11 (b) 74 (c) Error
40. 40.📝 On how many lines does the browser show this paragraph?
    <p>Stars shine<br>Rivers flow<br>Birds sing</p>

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