Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 800 · 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 CSS selector matches this element?
   <div class="note" id="intro">Hello</div> (a) .intro (b) #note (c) .note (d) #main
2. 2.🔗 Where does this link open?
   <a href="maths.html" target="_blank">Take the quiz</a> (a) in a new tab (b) in the same tab
3. 3.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a src="about.html"> (c) <link about.html> (d) <a alt="about.html">
4. 4.📊 How many cells does this table have in all?
   <table>
     <tr><td>Mango</td><td>Litchi</td></tr>
     <tr><td>Jamun</td><td>Jamun</td></tr>
     <tr><td>Orange</td><td>Banana</td></tr>
   </table>
5. 5.🎯 What kind of selector is #hero? (a) a class selector (b) an id selector (c) an element selector
6. 6.🔁 What number does this code print?
   let total = 0;
   for (let i = 1; i <= 9; i++) {
     total = total + 5;
   }
   console.log(total);
7. 7.🧭 Is <section> semantic or not semantic? (a) semantic (b) not semantic
8. 8.🎯 Which CSS selector matches this element?
   <span class="note" id="main">Hello</span> (a) p (b) #logo (c) #main (d) .big
9. 9.🔁 What does this code print?
   let temp = 37;
   if (temp >= 12) {
     console.log("Hot");
   } else {
     console.log("Cool");
   } (a) Hot (b) Cool
10. 10.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 640px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
11. 11.📄 Where does <ul> go: in the head or in the body? (a) in the body (b) in the head
12. 12.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 5px;
      border: 4px solid black;
      margin: 0px;
    }
14. 14.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 290px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
15. 15.🔗 Which address opens when you click this link?
    <a href="games.html">Art corner</a> (a) Art corner (b) about.html (c) games.html (d) contact.html
16. 16.💬 Which text will NOT show on the page?
    <p>Fun facts</p>
    <!-- <p>My pets</p> -->
    <p>The red kite</p> (a) My pets (b) Fun facts (c) The red kite
17. 17.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
18. 18.🔗 Which address opens when you click this link?
    <a href="news.html">About us</a> (a) quiz.html (b) games.html (c) About us (d) news.html
19. 19.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    #intro { color: yellow; }
    #intro { color: blue; } (a) white (b) yellow (c) blue (d) red
20. 20.🔢 In a basic web page file, which comes first: “</html>” or “<html>”? (a) <html> (b) </html>
21. 21.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="150"> (a) A red kite (b) tiger.jpg (c) A tiger asleep (d) width
22. 22.🔍 Which line is missing its closing tag?
    line 1: <h1>Cricket is fun.</h1>
    line 2: <h3>Fun facts
    line 3: <u>Rain today</u> (a) line 1 (b) line 2 (c) line 3
23. 23.🌍 What is the domain name in this URL?
    https://learn.example.com/games/chess.html (a) learn.example.com (b) https (c) /games/chess.html (d) www.example.com
24. 24.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="350"> (a) tiger.jpg (b) A tiger asleep (c) map.png (d) kite.png
25. 25.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h3> (a) Yes (b) No
26. 26.🖌️ Which CSS property centres a heading? (a) font-weight (b) background-color (c) font-family (d) text-align
27. 27.True or false: <input type="text"> is for one line of words. (a) False (b) True
28. 28.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Litchi</td><td>Papaya</td></tr>
      <tr><td>Guava</td><td>Banana</td></tr>
      <tr><td>Mango</td><td>Litchi</td></tr>
    </table>
29. 29.🌍 What is the domain name in this URL?
    http://kids.example.org/maths/tables.html (a) school.example.in (b) /maths/tables.html (c) http (d) kids.example.org
30. 30.📋 Does this list show bullets or numbers?
    <ol>
      <li>Litchi</li>
      <li>Orange</li>
    </ol> (a) bullets (b) numbers
31. 31.📝 What does <p> make? (a) a paragraph (b) a picture (c) a link (d) a table
32. 32.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) close it, tell an adult (b) type the password (c) share it with friends (d) click it twice
33. 33.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
34. 34.🛡️ Before typing a password on a site, check the address starts with ___. (a) https (b) ftp (c) www (d) http
35. 35.📄 Where does <a> go: in the head or in the body? (a) in the head (b) in the body
36. 36.🧭 Which semantic tag holds one blog post? (a) <aside> (b) <header> (c) <footer> (d) <article>
37. 37.True or false: HTTPS asks for a web page. (a) False (b) True
38. 38.🔁 What does this code print?
    let score = 18;
    if (score >= 23) {
      console.log("You win");
    } else {
      console.log("Play again");
    } (a) Play again (b) You win
39. 39.📋 Does this list show bullets or numbers?
    <ul>
      <li>Mango</li>
      <li>Orange</li>
      <li>Jamun</li>
    </ul> (a) bullets (b) numbers
40. 40.♿ Does this help everyone, or make the page harder to use: tiny grey text? (a) makes it harder (b) helps everyone

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