Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 708 · 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 is the odd one out? (a) stores a website’s files (b) hosts websites online (c) sends pages over the net (d) opens web pages for us
2. 2.🔗 Where does this link open?
   <a href="maths.html">About us</a> (a) in a new tab (b) in the same tab
3. 3.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
4. 4.📋 What number does the browser show next to “Orange”?
   <ol start="5">
     <li>Grapes</li>
     <li>Banana</li>
     <li>Orange</li>
   </ol>
5. 5.Which colour pair is hard to read? (a) black on white (b) dark grey on white (c) white on black (d) yellow on white
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 190px;
     padding: 20px;
     border: 2px solid black;
     margin: 0px;
   }
7. 7.🔁 When does the else part run? (a) always (b) when if is true (c) never (d) when if is false
8. 8.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="kite.png" alt="A red kite" width="150"> (a) Map of India (b) kite.png (c) width (d) A red kite
9. 9.🌍 What does a web address (URL) tell the browser? (a) your password (b) where the page is (c) the page colour (d) how old you are
10. 10.⚡ What number does this code print?
    let coins = 12;
    coins = coins + 11;
    coins = coins - 12;
    console.log(coins);
11. 11.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    .star { color: white; }
    h1 { color: orange; } (a) yellow (b) white (c) red (d) orange
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
13. 13.True or false: margin is space inside the border. (a) False (b) True
14. 14.🌈 Which colour of light is strongest in rgb(27, 71, 158)? (a) green (b) red (c) blue
15. 15.🔠 Which heading shows the SMALLEST text: <h6>, <h2>, <h4> or <h1>? (a) <h1> (b) <h6> (c) <h2> (d) <h4>
16. 16.🛡️ Before typing a password on a site, check the address starts with ___. (a) http (b) ftp (c) https (d) www
17. 17.🔗 Which words do you click on?
    <a href="contact.html">About us</a> (a) Contact us (b) href (c) contact.html (d) About us
18. 18.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: purple; } (a) green (b) purple (c) blue (d) orange
19. 19.🛡️ Should you share your password with your best friend? (a) No (b) Yes
20. 20.💬 Does the browser show comments on the page? (a) Yes (b) No
21. 21.♿ A part of the page is under a <h4> heading. Which tag should its sub-heading use? (a) <h5> (b) <h1> (c) <h3> (d) <h6>
22. 22.True or false: HTML on its own can run a game loop. (a) False (b) True
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      text-align: center;
    }
24. 24.📝 Which input type is for an email address? (a) radio (b) submit (c) email (d) checkbox
25. 25.⚡ What does this code print? (Look at the quotes!)
    let x = "9";
    let y = 8;
    console.log(x + y); (a) Error (b) 98 (c) 17
26. 26.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) black (c) red (d) bright green
27. 27.🔠 How many headings are in this code?
    <h1>Hello, world!</h1>
    <p>Hello, world!</p>
    <p>Fun facts</p>
28. 28.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="50"> (a) dog.jpg (b) cake.jpg (c) Map of India (d) map.png
29. 29.True or false: <a> goes in the head. (a) False (b) True
30. 30.🎯 Which element does the selector li style? (a) <p id="hero"> (b) <div> (c) <li class="menu"> (d) <span class="menu">
31. 31.📝 On how many lines does the browser show this paragraph?
    <p>Kites fly high<br>Rivers flow</p>
32. 32.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
33. 33.🚀 Which file is best for the colours and fonts? (a) script.js (b) photo.jpg (c) index.html (d) style.css
34. 34.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as 5 spaces (b) as a dot (c) as one space (d) as a new line
35. 35.📊 How many cells are in each row?
    <table>
      <tr><td>Guava</td><td>Banana</td><td>Orange</td><td>Jamun</td></tr>
      <tr><td>Orange</td><td>Orange</td><td>Papaya</td><td>Papaya</td></tr>
    </table>
36. 36.🔍 Which is the odd one out? (a) rounds box corners (b) makes a form box (c) lays out the page (d) adds space around boxes
37. 37.🔗 Which words do you click on?
    <a href="https://example.com">Art corner</a> (a) href (b) School news (c) Art corner (d) https://example.com
38. 38.True or false: <ul> goes in the head. (a) False (b) True
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
40. 40.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      text-align: left;
      color: green;
      font-size: 28px;
    } (a) black (b) red (c) green

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