Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 121 · 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 colour is the text of this element?
   <p class="menu" id="top">Hi</p>
   CSS:
   p { color: yellow; }
   #top { color: white; } (a) yellow (b) white (c) red (d) blue
2. 2.True or false: <ul> is one item of a list. (a) True (b) False
3. 3.🖌️ What colour are the letters?
   p {
     color: white;
     background-color: green;
     text-align: right;
     font-size: 40px;
   } (a) green (b) orange (c) white
4. 4.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) test in a browser (b) write the HTML (c) plan what to show (d) publish it online
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 310px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
6. 6.✍️ Which property is set to bold in this rule?
   p {
     font-weight: bold;
     text-align: center;
     font-style: italic;
     padding: 8px;
   } (a) bold (b) width (c) font-weight (d) border
7. 7.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <title> (c) <h1> (d) <link rel="stylesheet">
8. 8.📋 What number does the browser show next to “Jamun”?
   <ol>
     <li>Guava</li>
     <li>Grapes</li>
     <li>Jamun</li>
     <li>Papaya</li>
     <li>Banana</li>
   </ol>
9. 9.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
10. 10.🔠 How many <h1> headings should a page usually have? (a) 1 (b) 6 (c) 3 (d) 10
11. 11.📊 Which tag makes one data cell? (a) <tr> (b) <table> (c) <td> (d) <caption>
12. 12.True or false: in <img>, alt tells which image to load. (a) True (b) False
13. 13.🌍 Which one sends the page back? (a) the server (b) HTTPS (c) the URL (d) the browser
14. 14.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
15. 15.⚡ Which JavaScript word runs code when true? (a) if (b) for (c) alert() (d) console.log()
16. 16.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) the line round the box
17. 17.📄 What is the big heading shown on this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Cricket Club</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>I like to read.</p>
    </body>
    </html> (a) Cricket Club (b) body (c) I like to read. (d) Match report
18. 18.🔁 How many numbers does this code print?
    for (let i = 0; i < 13; i = i + 4) {
      console.log(i);
    }
19. 19.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <p> (c) <br> (d) <h1>
20. 20.🔁 How many times does this code print “Hello”?
    for (let i = 1; i < 5; i++) {
      console.log("Hello");
    }
21. 21.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="bus.jpg" alt="Our school bus" width="300"> (a) Our school bus (b) width (c) bus.jpg (d) An old fort
22. 22.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 13; i = i + 2) {
      console.log(i);
    }
23. 23.🔠 Which heading shows the BIGGEST text: <h2>, <h6>, <h5> or <h1>? (a) <h1> (b) <h2> (c) <h6> (d) <h5>
24. 24.🔁 How many times does this code print “Hi”?
    for (let i = 2; i < 8; i++) {
      console.log("Hi");
    }
25. 25.🧭 Which semantic tag sits at the very top? (a) <nav> (b) <main> (c) <article> (d) <header>
26. 26.⚡ Which tag holds JavaScript in a page? (a) <code> (b) <script> (c) <style> (d) <js>
27. 27.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      background-color: purple;
      font-size: 36px;
      color: yellow;
    } (a) white (b) purple (c) yellow
28. 28.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      padding: 8px;
    } (a) body (b) li (c) color (d) 8px
29. 29.🖌️ What colour are the letters?
    h2 {
      background-color: white;
      color: purple;
      text-align: left;
      font-size: 20px;
    } (a) blue (b) purple (c) white
30. 30.🎯 Which element does the selector h2 style? (a) <div class="box"> (b) <h2 class="box"> (c) <span id="main"> (d) <li>
31. 31.True or false: <input type="email"> lets you pick only one. (a) False (b) True
32. 32.Which of these is an opening tag? (a) </title> (b) <title> (c) </b> (d) </p>
33. 33.🔢 In a basic web page file, which comes LAST? (a) </head> (b) <head> (c) </html> (d) <html>
34. 34.True or false: in <img>, src shows if the image fails. (a) True (b) False
35. 35.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="100"> (a) A red kite (b) cake.jpg (c) kite.png (d) map.png
36. 36.🔁 Which word runs code only when something is true? (a) if (b) log (c) for (d) let
37. 37.🔍 Which is the odd one out? (a) answers page requests (b) hosts websites online (c) stores a website’s files (d) shows line numbers
38. 38.🏷️ Is </body> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
39. 39.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) exactly 100px (d) 800px or narrower
40. 40.Which of these goes in the head? (a) <table> (b) <h1> (c) <img> (d) <style>

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