Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 150 · 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 tag makes one table row? (a) <table> (b) <tr> (c) <th> (d) <td>
2. 2.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
     <tr><td>Papaya</td><td>Grapes</td><td>Orange</td><td>Grapes</td></tr>
     <tr><td>Mango</td><td>Banana</td><td>Litchi</td><td>Litchi</td></tr>
     <tr><td>Mango</td><td>Jamun</td><td>Papaya</td><td>Litchi</td></tr>
   </table>
3. 3.True or false: to log out on shared PCs is not safe. (a) False (b) True
4. 4.🔢 On a typical page, from top to bottom, which comes first: “<main>” or “<nav>”? (a) <nav> (b) <main>
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 370px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 80px wide (no margins).
6. 6.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is fast (b) the data is scrambled (c) the site is free (d) the site is a game
7. 7.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
8. 8.Which of these has a closing tag? (a) <br> (b) <img> (c) <h1> (d) <input>
9. 9.✍️ How does a CSS comment start? (a) // (b) <!-- (c) /* (d) #
10. 10.Which of these is true of <article>? (a) holds extra side notes (b) holds one blog post (c) helps you move around (d) holds copyright notes
11. 11.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-weight: bold;
      border: 2px solid;
      background-color: yellow;
    }
13. 13.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h3> (a) Yes (b) No
14. 14.🎯 Which CSS selector matches this element?
    <span class="big" id="logo">Hello</span> (a) .red (b) #end (c) span (d) #big
15. 15.True or false: <meta charset="utf-8"> goes in the head. (a) False (b) True
16. 16.🏷️ Is <li> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
17. 17.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    .star { color: yellow; }
    p { color: red; } (a) red (b) blue (c) yellow (d) orange
18. 18.✍️ What value is given to color in this rule?
    li {
      width: 300px;
      border: 2px solid;
      color: red;
      background-color: yellow;
    } (a) color (b) 20px (c) red (d) center
19. 19.🌈 Which colour is #00ff00? (a) red (b) white (c) bright green (d) blue
20. 20.📝 What does <hr> draw? (a) a link (b) a picture (c) a table (d) a line across the page
21. 21.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h2> → <h4> (a) Yes (b) No
22. 22.🌈 Which colour is rgb(255, 255, 255)? (a) bright green (b) blue (c) red (d) white
23. 23.🔠 Which heading shows the SMALLEST text: <h4>, <h3>, <h5> or <h1>? (a) <h3> (b) <h1> (c) <h4> (d) <h5>
24. 24.🔒 Is the connection to this address scrambled (encrypted)?
    https://kids.example.org/index.html (a) No (b) Yes
25. 25.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Mango</td></tr>
    </table>
26. 26.📝 Which input type picks a day? (a) password (b) date (c) submit (d) email
27. 27.💬 How does an HTML comment start? (a) // (b) <!-- (c) # (d) /*
28. 28.🧭 Is <span> semantic or not semantic? (a) semantic (b) not semantic
29. 29.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    h2 { color: red; }
    #main { color: yellow; }
    .star { color: black; } (a) red (b) black (c) yellow (d) blue
30. 30.True or false: <ul> lists things in any order. (a) True (b) False
31. 31.🔍 Which is the odd one out? (a) changes the text size (b) reacts to a button click (c) adds space around boxes (d) lays out the page
32. 32.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="50"> (a) fort.jpg (b) An old fort (c) kite.png (d) tiger.jpg
33. 33.True or false: in <img>, width is read by screen readers. (a) True (b) False
34. 34.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) space-between (d) flex-start
35. 35.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
36. 36.True or false: <li> is an unordered list. (a) True (b) False
37. 37.🔠 How many headings are in this code?
    <h1>I love mangoes.</h1>
    <p>My best friend</p>
    <h4>Rain today</h4>
    <h4>My best friend</h4>
38. 38.🏷️ Is </h1> an opening tag or a closing tag? (a) a closing tag (b) an opening tag
39. 39.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) magenta (c) cyan (d) black
40. 40.🌐 Which one sends pages over the net? (a) a web browser (b) a web server (c) a code editor

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