Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 35 · 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 text will NOT show on the page?
   <p>Our school trip</p>
   <p>Cricket is fun.</p>
   <p>My pets</p>
   <!-- <p>Hello, world!</p> --> (a) Hello, world! (b) Our school trip (c) My pets (d) Cricket is fun.
2. 2.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
3. 3.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) gap (d) display: flex
4. 4.🎯 Which CSS selector matches this element?
   <h2 class="star" id="main">Hello</h2> (a) #star (b) .menu (c) #logo (d) h2
5. 5.📊 In a table, which tag is a row? (a) <tr> (b) <th> (c) <td> (d) <tb>
6. 6.🔁 What is the LAST number this code prints?
   for (let i = 0; i < 15; i = i + 2) {
     console.log(i);
   }
7. 7.🏷️ HTML marks up text using ___. (a) wires (b) keys (c) pixels (d) tags
8. 8.True or false: <meta charset="utf-8"> goes in the body. (a) False (b) True
9. 9.True or false: <table> gives the table a title. (a) True (b) False
10. 10.💬 Does the browser show comments on the page? (a) Yes (b) No
11. 11.🌈 Which colour is #0000ff? (a) blue (b) magenta (c) cyan (d) black
12. 12.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    #hero { color: blue; }
    h1 { color: green; }
    .menu { color: white; } (a) orange (b) white (c) blue (d) green
13. 13.True or false: <li> is an empty tag. (a) True (b) False
14. 14.🌍 What is the path in this URL?
    https://www.example.com/index.html (a) www.example.com (b) /index.html (c) https (d) /art/gallery.html
15. 15.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="350"> (a) A tiger asleep (b) fort.jpg (c) width (d) An old fort
16. 16.✍️ What value is given to background-color in this rule?
    p {
      background-color: yellow;
      color: red;
    } (a) 8px (b) 10px (c) yellow (d) background-color
17. 17.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Our school trip</p>
    <!-- <p>My best friend</p> -->
    <p>Fun facts</p>
18. 18.🧭 How many <main> parts should a page have? (a) one (b) ten (c) three (d) none
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
      background-color: yellow;
    }
20. 20.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    #top { color: green; }
    .big { color: purple; } (a) purple (b) white (c) yellow (d) green
21. 21.🎯 Which CSS selector matches this element?
    <h2 class="box" id="logo">Hello</h2> (a) .star (b) #box (c) .logo (d) #logo
22. 22.Which of these is margin? (a) the line round the box (b) space outside the border (c) space inside the border (d) a solid or dotted edge
23. 23.📝 Which tag holds a whole form? (a) <ol> (b) <form> (c) <input> (d) <table>
24. 24.🌐 Which one has an address bar? (a) a web browser (b) a web server (c) a code editor
25. 25.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: purple; }
    h2 { color: black; } (a) yellow (b) black (c) blue (d) purple
26. 26.⚡ Which tag holds JavaScript in a page? (a) <script> (b) <js> (c) <code> (d) <style>
27. 27.📋 Which tag goes around each item of a list? (a) <ul> (b) <li> (c) <ol> (d) <p>
28. 28.🧭 Which semantic tag helps you move around? (a) <main> (b) <aside> (c) <header> (d) <nav>
29. 29.🔠 How many <h1> headings should a page usually have? (a) 10 (b) 1 (c) 3 (d) 6
30. 30.🌍 What is the domain name in this URL?
    http://school.example.in/index.html (a) http (b) /index.html (c) school.example.in (d) www.example.net
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
      font-size: 20px;
    }
32. 32.What is <input type="checkbox"> for? (a) takes only numbers (b) lets you tick many (c) is for an email address (d) lets you pick only one
33. 33.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Litchi</td><td>Guava</td></tr>
    </table>
34. 34.🔍 Which is the odd one out? (a) rounds box corners (b) adds space around boxes (c) lays out the page (d) checks a quiz answer
35. 35.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
36. 36.🔁 Which loop repeats code a set number of times? (a) let (b) if (c) for (d) else
37. 37.📝 How many paragraphs does this code make?
    <p>Cricket is fun.</p>
    <h2>Hello, world!</h2>
    <h2>Rain today</h2>
    <h2>Good morning!</h2>
38. 38.True or false: <tr> makes one data cell. (a) False (b) True
39. 39.📋 Does this list show bullets or numbers?
    <ol>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Litchi</li>
    </ol> (a) bullets (b) numbers
40. 40.📋 Which list tag shows bullet points? (a) <ol> (b) <ul> (c) <li>

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