Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 831 · 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 attribute of <img> tells which image to load? (a) height (b) src (c) width (d) alt
2. 2.📊 Where do <td> cells go? (a) inside a <p> (b) inside a <li> (c) inside a <tr> (d) inside the <head>
3. 3.🎯 Which element does the selector #hero style? (a) <p id="hero"> (b) <p class="hero"> (c) <p id="top"> (d) <h1 class="note">
4. 4.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 1 (d) 5
5. 5.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total = total + i;
   }
   console.log(total);
6. 6.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
7. 7.📊 How many cells does this table have in all?
   <table>
     <tr><td>Jamun</td><td>Guava</td></tr>
     <tr><td>Jamun</td><td>Mango</td></tr>
     <tr><td>Litchi</td><td>Orange</td></tr>
   </table>
8. 8.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <link about.html> (c) <a alt="about.html"> (d) <a src="about.html">
9. 9.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Cricket Club</title>
   </head>
   <body>
     <h1>Planets</h1>
     <p>Thanks for visiting.</p>
   </body>
   </html> (a) index.html (b) Thanks for visiting. (c) Cricket Club (d) Planets
10. 10.🔗 Which words do you click on?
    <a href="contact.html">Art corner</a> (a) Art corner (b) School news (c) contact.html (d) href
11. 11.True or false: p { color: red; } goes in script.js. (a) False (b) True
12. 12.🌈 Which colour is #ffffff? (a) black (b) red (c) white (d) yellow
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
14. 14.Which colour pair is easy to read? (a) pink on red (b) blue on purple (c) yellow on black (d) light grey on white
15. 15.True or false: HTML on its own can count button clicks. (a) True (b) False
16. 16.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cricket Club</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) All about me (b) Cricket Club (c) body (d) I like to read.
17. 17.⚡ What number does this code print?
    let a = 18;
    let b = 6;
    console.log(a + b);
18. 18.📄 Where does the text of <title> appear? (a) in a big heading (b) at the bottom (c) nowhere (d) on the browser tab
19. 19.💪 Which flexbox property lines boxes up across? (a) gap (b) display: flex (c) align-items (d) justify-content
20. 20.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
21. 21.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="400"> (a) Map of India (b) cake.jpg (c) map.png (d) dog.jpg
22. 22.🖌️ Which CSS property colours behind the text? (a) background-color (b) text-align (c) color (d) font-size
23. 23.📊 Which tag makes a heading cell? (a) <td> (b) <table> (c) <caption> (d) <th>
24. 24.True or false: to put secrets in comments is safe. (a) False (b) True
25. 25.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
26. 26.True or false: in <img>, src tells which image to load. (a) True (b) False
27. 27.📋 How many items does this list show?
    <ol>
      <li>Papaya</li>
      <li>Orange</li>
    </ol>
28. 28.🔢 When you open a web page, which comes first: “the browser shows it” or “the browser asks it”? (a) the browser asks it (b) the browser shows it
29. 29.🌈 Which colour is rgb(255, 255, 255)? (a) black (b) white (c) yellow (d) cyan
30. 30.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <css> (d) <img>
31. 31.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="end">Hello</h1> (a) h2 (b) .note (c) .end (d) #end
32. 32.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
33. 33.🔠 Which heading shows the SMALLEST text: <h2>, <h4>, <h6> or <h3>? (a) <h3> (b) <h2> (c) <h4> (d) <h6>
34. 34.💬 How does an HTML comment start? (a) // (b) <!-- (c) # (d) /*
35. 35.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
    </form>
36. 36.🔤 In “HTML”, what does the M stand for? (a) Mouse (b) Modern (c) Machine (d) Markup
37. 37.🎯 Which element does the selector .star style? (a) <div id="star"> (b) <div class="star"> (c) <div class="menu"> (d) <span class="note">
38. 38.🔐 Is qwerty a strong or a weak password? (a) strong (b) weak
39. 39.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
40. 40.🌈 Which hex code is yellow? (a) #00ff00 (b) #ff00ff (c) #00ffff (d) #ffff00

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