Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 935 · 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 hex code is white? (a) #ffffff (b) #ffff00 (c) #000000 (d) #00ff00
2. 2.Which of these is a closing tag? (a) <body> (b) <title> (c) </h1> (d) <p>
3. 3.💬 How many paragraphs show on the page?
   <!-- <p>Our school trip</p> -->
   <p>Hello, world!</p>
   <!-- <p>Good morning!</p> -->
4. 4.True or false: <ul> lists things in any order. (a) False (b) True
5. 5.Which of these is true of <header>? (a) holds the logo and title (b) holds the main content (c) is the page’s key part (d) helps you move around
6. 6.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) 1 (d) any number
7. 7.📋 Which list shows the steps of a recipe best? (a) <br> (b) <hr> (c) <ol> (d) <ul>
8. 8.🔗 What does target="_blank" do to a link? (a) opens it in a new tab (b) makes it blank (c) hides the link (d) makes it bold
9. 9.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <h1> (c) <title> (d) <link rel="stylesheet">
10. 10.⚖️ What colour is the text of this element?
    <h1 class="star" id="logo">Hi</h1>
    CSS:
    .star { color: red; }
    h1 { color: purple; }
    #logo { color: green; } (a) red (b) green (c) black (d) purple
11. 11.🔢 In a basic web page file, which comes first: “<!DOCTYPE html>” or “<body>”? (a) <body> (b) <!DOCTYPE html>
12. 12.🔁 How many times does this code print “Hi”?
    for (let i = 0; i < 9; i++) {
      console.log("Hi");
    }
13. 13.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h2> (a) No (b) Yes
14. 14.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    #main { color: green; }
    .red { color: purple; } (a) purple (b) black (c) blue (d) green
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 420px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
16. 16.🛡️ Should you share your password with your best friend? (a) Yes (b) No
17. 17.💬 How does an HTML comment end? (a) >> (b) */ (c) --> (d) //
18. 18.True or false: <ol> lists things in any order. (a) False (b) True
19. 19.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
20. 20.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
21. 21.📄 Where does <table> go: in the head or in the body? (a) in the body (b) in the head
22. 22.True or false: <meta> is an empty tag. (a) True (b) False
23. 23.🔒 Is the connection to this address scrambled (encrypted)?
    https://www.example.com/news/today.html (a) No (b) Yes
24. 24.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
25. 25.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 460px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
26. 26.🔁 When does the else part run? (a) never (b) always (c) when if is true (d) when if is false
27. 27.⚡ What does this code show?
    let name = "Meera";
    console.log("Hello, " + name + "!"); (a) name (b) Meera (c) Hello, Meera! (d) Hello, name!
28. 28.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <ul> (c) <link rel="stylesheet"> (d) <title>
29. 29.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Jamun</td><td>Papaya</td><td>Orange</td></tr>
      <tr><td>Litchi</td><td>Grapes</td><td>Mango</td></tr>
      <tr><td>Grapes</td><td>Mango</td><td>Banana</td></tr>
    </table>
30. 30.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    .red { color: red; }
    h2 { color: purple; }
    #end { color: yellow; } (a) green (b) purple (c) red (d) yellow
31. 31.🖌️ How big is the text, in px?
    li {
      font-size: 16px;
      color: yellow;
      text-align: right;
      background-color: orange;
    }
32. 32.Which of these is an empty tag? (a) <b> (b) <ul> (c) <title> (d) <meta>
33. 33.🧭 How many <main> parts should a page have? (a) one (b) none (c) ten (d) three
34. 34.🔢 When you open a web page, what comes right after “you type the URL”? (a) the browser shows it (b) the server sends files (c) the browser asks it (d) DNS finds the server
35. 35.What does justify-content: flex-start do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
36. 36.🔢 To build and share your first web page, which comes FIRST? (a) test in a browser (b) publish it online (c) plan what to show (d) write the HTML
37. 37.📋 What number does the browser show next to “Banana”?
    <ol>
      <li>Mango</li>
      <li>Papaya</li>
      <li>Banana</li>
      <li>Jamun</li>
    </ol>
38. 38.🔁 What does this code print?
    let marks = 11;
    if (marks < 23) {
      console.log("Pass");
    } else {
      console.log("Try again");
    } (a) Pass (b) Try again
39. 39.⚡ Which JavaScript word writes in the console? (a) let (b) for (c) if (d) console.log()
40. 40.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      color: orange;
      font-size: 40px;
      background-color: red;
    } (a) orange (b) black (c) red

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