Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 333 · 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.✍️ What value is given to background-color in this rule?
   h1 {
     font-weight: bold;
     border: 2px solid;
     text-align: center;
     background-color: yellow;
   } (a) yellow (b) 8px (c) 10px (d) background-color
2. 2.📝 Which input type hides what you type? (a) checkbox (b) submit (c) date (d) password
3. 3.🏷️ Is <p> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
4. 4.🔁 What does this code print?
   let score = 49;
   if (score > 9) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) Play again (b) You win
5. 5.🎯 Which CSS selector matches this element?
   <li class="red" id="main">Hello</li> (a) .box (b) li (c) #red (d) #logo
6. 6.🌈 In #00008d the blue part is the hex number 8d. What is it as a normal number?
7. 7.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h6> or <h4>? (a) <h4> (b) <h6> (c) <h5> (d) <h1>
8. 8.💬 Which text will NOT show on the page?
   <!-- <p>Our school trip</p> -->
   <p>Good morning!</p>
   <p>The red kite</p> (a) The red kite (b) Good morning! (c) Our school trip
9. 9.🔢 When you open a web page, what comes right after “you type the URL”? (a) the browser asks it (b) the browser shows it (c) DNS finds the server (d) the server sends files
10. 10.Which of these is padding? (a) space outside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
11. 11.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
12. 12.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<nav>”? (a) <nav> (b) <header>
13. 13.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h3> or <h5>? (a) <h5> (b) <h3> (c) <h4> (d) <h2>
14. 14.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 2;
    }
    console.log(total);
15. 15.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
16. 16.📝 Does <ul> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
17. 17.🌈 Which colour of light is strongest in rgb(167, 9, 120)? (a) green (b) red (c) blue
18. 18.🌗 Is white on dark blue easy or hard to read? (a) easy to read (b) hard to read
19. 19.🌈 Which colour is rgb(0, 255, 255)? (a) bright green (b) yellow (c) cyan (d) red
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-size: 20px;
    }
21. 21.⚡ Which JavaScript word runs code when true? (a) if (b) console.log() (c) for (d) let
22. 22.📝 Which input type takes only numbers? (a) text (b) submit (c) email (d) number
23. 23.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a href="about.html"> (c) <link about.html> (d) <a alt="about.html">
24. 24.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Here is my best one.</p>
    </body>
    </html> (a) My drawings (b) Here is my best one. (c) index.html (d) Space Facts
25. 25.🖼️ How many pixels wide is the picture drawn?
    <img src="map.png" alt="Map of India" width="100">
26. 26.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Papaya</td><td>Papaya</td></tr>
    </table>
27. 27.🌈 In #000082 the blue part is the hex number 82. What is it as a normal number?
28. 28.What does color do? (a) makes the text bold (b) sets the letter colour (c) centres a heading (d) picks the font style
29. 29.🎯 Which element does the selector .star style? (a) <span class="menu"> (b) <p class="note"> (c) <span class="star"> (d) <span id="star">
30. 30.True or false: let score = 0; goes in script.js. (a) False (b) True
31. 31.True or false: to share your OTP is not safe. (a) False (b) True
32. 32.What does font-size do? (a) colours behind the text (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
33. 33.Which of these is true of a code editor? (a) has an address bar (b) stores a website’s files (c) shows pages from the web (d) saves our .html files
34. 34.⚡ What does this code print? (Look at the quotes!)
    let x = "2";
    let y = 3;
    console.log(x + y); (a) 23 (b) 5 (c) Error
35. 35.True or false: margin is the line round the box. (a) False (b) True
36. 36.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 14px;
      }
    }
37. 37.🖌️ What colour are the letters?
    li {
      text-align: center;
      font-size: 32px;
      background-color: purple;
      color: yellow;
    } (a) yellow (b) red (c) purple
38. 38.📋 Does this list show bullets or numbers?
    <ul>
      <li>Guava</li>
      <li>Papaya</li>
    </ul> (a) numbers (b) bullets
39. 39.🖌️ Which CSS property colours behind the text? (a) font-size (b) font-weight (c) text-align (d) background-color
40. 40.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + i;
    }
    console.log(total);

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