Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 583 · 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.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 8px;
     }
   }
2. 2.True or false: <th> makes one data cell. (a) False (b) True
3. 3.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) blue (d) red
4. 4.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
5. 5.📝 On how many lines does the browser show this paragraph?
   <p>Sky is blue<br>Birds sing<br>Stars shine<br>Kites fly high</p>
6. 6.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
7. 7.🔗 Which attribute holds the address of a link? (a) id (b) src (c) alt (d) href
8. 8.🔗 Which words do you click on?
   <a href="contact.html">Contact us</a> (a) href (b) contact.html (c) Contact us (d) Visit the site
9. 9.🖼️ Which picture file does the browser load?
   <img src="dog.jpg" alt="A happy dog" width="150"> (a) A happy dog (b) moon.png (c) bus.jpg (d) dog.jpg
10. 10.⚡ What number does this code print?
    let coins = 13;
    coins = coins + 13;
    coins = coins - 5;
    console.log(coins);
11. 11.🧭 Which semantic tag helps you move around? (a) <main> (b) <footer> (c) <aside> (d) <nav>
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 5px;
      border: 2px solid black;
      margin: 15px;
    }
13. 13.True or false: <li> lists things in any order. (a) False (b) True
14. 14.🔠 How many headings are in this code?
    <h1>Our school trip</h1>
    <p>Good morning!</p>
    <h3>My best friend</h3>
15. 15.♿ Does this help everyone, or make the page harder to use: use big enough text? (a) makes it harder (b) helps everyone
16. 16.📝 Which input type is for an email address? (a) date (b) email (c) submit (d) text
17. 17.🎯 Can many elements share the same class? (a) No (b) Yes
18. 18.🎯 Which element does the selector #end style? (a) <p class="end"> (b) <p id="hero"> (c) <h1 class="note"> (d) <p id="end">
19. 19.💬 How does an HTML comment start? (a) /* (b) <!-- (c) # (d) //
20. 20.🔤 In “HTML”, what does the L stand for? (a) Line (b) Laptop (c) Language (d) Link
21. 21.True or false: in <img>, src names the picture file. (a) False (b) True
22. 22.🖌️ What colour is behind the letters?
    h2 {
      color: yellow;
      background-color: red;
      text-align: right;
      font-size: 36px;
    } (a) black (b) red (c) yellow
23. 23.🔠 Which heading shows the SMALLEST text: <h3>, <h2>, <h6> or <h4>? (a) <h2> (b) <h6> (c) <h4> (d) <h3>
24. 24.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
25. 25.🏷️ Which is the closing tag for <strong>? (a) </strong> (b) <\strong> (c) <strong/> (d) <strong>
26. 26.🎯 Which CSS selector matches this element?
    <span class="note" id="top">Hello</span> (a) .top (b) .big (c) #intro (d) #top
27. 27.📝 Which input type hides what you type? (a) email (b) password (c) number (d) radio
28. 28.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="300">
29. 29.Which of these goes in the head? (a) <a> (b) <table> (c) <p> (d) <meta charset="utf-8">
30. 30.True or false: padding is space inside the border. (a) False (b) True
31. 31.🌈 Which colour is rgb(255, 0, 255)? (a) cyan (b) yellow (c) blue (d) magenta
32. 32.♿ Who uses a screen reader? (a) only robots (b) people who are blind (c) only teachers (d) only coders
33. 33.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 8; i = i + 4) {
      console.log(i);
    }
34. 34.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cricket Club</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) All about me (b) Cricket Club (c) index.html (d) Mars is red.
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
36. 36.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-size (c) font-family (d) background-color
37. 37.🌈 Which colour of light is strongest in rgb(157, 53, 57)? (a) red (b) blue (c) green
38. 38.🔠 Which heading shows the BIGGEST text: <h6>, <h5>, <h4> or <h1>? (a) <h1> (b) <h6> (c) <h5> (d) <h4>
39. 39.🔍 Which line is missing its closing tag?
    line 1: <h1>My pets
    line 2: <h2>Our school trip</h2>
    line 3: <strong>My best friend</strong> (a) line 3 (b) line 2 (c) line 1
40. 40.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Papaya</td><td>Papaya</td><td>Grapes</td><td>Papaya</td></tr>
      <tr><td>Papaya</td><td>Papaya</td><td>Banana</td><td>Jamun</td></tr>
    </table>

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