Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 365 · 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.🛡️ Online: is it safe to put secrets in comments? (a) safe (b) not safe
2. 2.🔠 Which heading shows the SMALLEST text: <h3>, <h6>, <h2> or <h1>? (a) <h1> (b) <h6> (c) <h2> (d) <h3>
3. 3.True or false: <input type="number"> is for an email address. (a) True (b) False
4. 4.🔗 Which address opens when you click this link?
   <a href="maths.html">Art corner</a> (a) maths.html (b) news.html (c) Art corner (d) art.html
5. 5.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
6. 6.🖼️ Which attribute of <img> is read by screen readers? (a) width (b) alt (c) height (d) src
7. 7.What does color do? (a) colours behind the text (b) makes the text bold (c) picks the font style (d) sets the letter colour
8. 8.⚡ Which tag holds JavaScript in a page? (a) <code> (b) <style> (c) <script> (d) <js>
9. 9.📄 Where does <a> go: in the head or in the body? (a) in the body (b) in the head
10. 10.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
11. 11.🔗 Which address opens when you click this link?
    <a href="quiz.html">Maths fun</a> (a) games.html (b) quiz.html (c) Maths fun (d) about.html
12. 12.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Rain today</p>
    <p>My pets</p>
    <!-- <p>Good morning!</p> -->
13. 13.📋 What number does the browser show next to “Mango”?
    <ol>
      <li>Jamun</li>
      <li>Guava</li>
      <li>Mango</li>
    </ol>
14. 14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
15. 15.True or false: <ol> is an ordered list. (a) False (b) True
16. 16.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) align-items (c) gap (d) justify-content
17. 17.🌗 Is light grey on white easy or hard to read? (a) easy to read (b) hard to read
18. 18.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
19. 19.🎯 Which CSS selector matches this element?
    <h1 class="note" id="logo">Hello</h1> (a) h1 (b) #end (c) h2 (d) .logo
20. 20.True or false: in <img>, src names the picture file. (a) False (b) True
21. 21.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 4; i++) {
      total = total + i;
    }
    console.log(total);
22. 22.🏷️ Which is the closing tag for <em>? (a) </em> (b) <em/> (c) <\em> (d) <em>
23. 23.True or false: alert(score); goes in index.html. (a) False (b) True
24. 24.True or false: “label every form box” helps everyone use the page. (a) False (b) True
25. 25.🖼️ Does <img> need a closing tag? (a) Yes (b) No
26. 26.🎯 Which sign starts an id selector? (a) . (b) @ (c) & (d) #
27. 27.🎯 Which CSS selector matches this element?
    <p class="menu" id="intro">Hello</p> (a) #main (b) h1 (c) .menu (d) .note
28. 28.🌈 In #000031 the blue part is the hex number 31. What is it as a normal number?
29. 29.🌈 Which colour is #ffffff? (a) yellow (b) red (c) blue (d) white
30. 30.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
31. 31.🔗 Where does this link open?
    <a href="contact.html">Visit the site</a> (a) in a new tab (b) in the same tab
32. 32.🌈 Which hex code is red? (a) #ffff00 (b) #000000 (c) #00ff00 (d) #ff0000
33. 33.💪 Which flexbox property turns on flexbox? (a) display: flex (b) flex-direction (c) gap (d) justify-content
34. 34.🎯 Which CSS selector matches this element?
    <span class="note" id="main">Hello</span> (a) span (b) #logo (c) .main (d) .big
35. 35.True or false: HTML on its own can make links to pages. (a) False (b) True
36. 36.🌈 Which colour is #ffff00? (a) cyan (b) white (c) magenta (d) yellow
37. 37.🖌️ Where does the text sit on its line?
    li {
      color: green;
      background-color: orange;
      font-size: 40px;
      text-align: right;
    } (a) on the left (b) in the middle (c) on the right
38. 38.📊 How many rows does this table have?
    <table>
      <tr><td>Jamun</td><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Litchi</td></tr>
      <tr><td>Orange</td><td>Papaya</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Orange</td><td>Mango</td></tr>
    </table>
39. 39.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) F (d) J
40. 40.📊 How many cells does this table have in all?
    <table>
      <tr><td>Guava</td><td>Mango</td><td>Grapes</td><td>Grapes</td></tr>
      <tr><td>Papaya</td><td>Orange</td><td>Guava</td><td>Banana</td></tr>
    </table>

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