Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 260 · 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.What does justify-content: space-between do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
2. 2.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Space Facts</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>Thanks for visiting.</p>
   </body>
   </html> (a) Space Facts (b) Thanks for visiting. (c) body (d) My drawings
3. 3.True or false: <header> sits at the bottom. (a) True (b) False
4. 4.🧭 Which semantic tag sits at the very top? (a) <aside> (b) <nav> (c) <main> (d) <header>
5. 5.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<footer>”? (a) <header> (b) <footer>
6. 6.🔗 Which words do you click on?
   <a href="https://example.com">Play games</a> (a) Play games (b) About us (c) href (d) https://example.com
7. 7.📋 Does this list show bullets or numbers?
   <ul>
     <li>Mango</li>
     <li>Jamun</li>
     <li>Papaya</li>
   </ul> (a) bullets (b) numbers
8. 8.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
9. 9.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
10. 10.🔍 Which is the odd one out? (a) is where we type code (b) colours code to help us (c) saves our .html files (d) turns HTML into a page
11. 11.⚡ Which JavaScript word repeats code? (a) let (b) for (c) alert() (d) if
12. 12.True or false: <p> goes in the body. (a) True (b) False
13. 13.📄 Can HTML on its own make bullet lists? (a) No (b) Yes
14. 14.🔢 In a basic web page file, which comes first: “</html>” or “</body>”? (a) </body> (b) </html>
15. 15.📝 Which tag makes a drop-down list? (a) <ul> (b) <li> (c) <ol> (d) <select>
16. 16.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      background-color: yellow;
      width: 300px;
      padding: 8px;
    } (a) #top (b) text-align (c) .note (d) yellow
17. 17.🏷️ Which is the closing tag for <i>? (a) <\i> (b) </i> (c) <i/> (d) <i>
18. 18.Which of these is a strong password? (a) password (b) S0lar!Pen#8 (c) qwerty (d) riya2014
19. 19.🔍 Which is the odd one out? (a) saves our .html files (b) is where we type code (c) shows line numbers (d) shows pages from the web
20. 20.🧭 Which semantic tag holds copyright notes? (a) <footer> (b) <article> (c) <main> (d) <header>
21. 21.What is <input type="number"> for? (a) takes only numbers (b) sends the form (c) picks a day (d) lets you tick many
22. 22.Which of these is a strong password? (a) qwerty (b) Chai$Cup_19x (c) iloveyou (d) abcd1234
23. 23.🔗 Which tag makes a clickable link? (a) <link> (b) <p> (c) <img> (d) <a>
24. 24.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
25. 25.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
26. 26.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="50"> (a) tiger.jpg (b) bus.jpg (c) Our school bus (d) fort.jpg
27. 27.True or false: <nav> holds the logo and title. (a) True (b) False
28. 28.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
29. 29.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
30. 30.🔠 Are headings shown in bold by default? (a) Yes (b) No
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
32. 32.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    .menu { color: orange; }
    .menu { color: blue; } (a) blue (b) black (c) orange (d) white
33. 33.Which colour pair is hard to read? (a) yellow on white (b) white on black (c) black on white (d) white on dark blue
34. 34.🚀 Which file should this code go in: alert("Hi"); (a) index.html (b) style.css (c) script.js
35. 35.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
36. 36.🔍 Which is the odd one out? (a) answers page requests (b) stores a website’s files (c) sends pages over the net (d) opens web pages for us
37. 37.🔠 How many heading levels does HTML have? (a) 10 (b) 6 (c) 4 (d) 3
38. 38.♿ What does good colour contrast mean? (a) text stands out clearly (b) many bright colours (c) no colours at all (d) only red text
39. 39.🧩 An opening tag + content + a closing tag together make an ___. (a) element (b) address (c) editor (d) attribute
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).

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