Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 722 · 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.🔠 How many headings are in this code?
   <h1>Fun facts</h1>
   <h4>My best friend</h4>
   <h2>I love mangoes.</h2>
   <p>Cricket is fun.</p>
2. 2.📝 Which input type sends the form? (a) text (b) date (c) password (d) submit
3. 3.✍️ Which sign goes between a property and its value? (a) : (b) = (c) ; (d) -
4. 4.True or false: in <img>, alt is read by screen readers. (a) False (b) True
5. 5.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h3> or <h5>? (a) <h1> (b) <h5> (c) <h6> (d) <h3>
6. 6.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <main> (b) <header> (c) <footer>
7. 7.📊 Where do <td> cells go? (a) inside a <tr> (b) inside a <p> (c) inside a <li> (d) inside the <head>
8. 8.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
9. 9.What does font-weight do? (a) sets the letter colour (b) makes the text bold (c) centres a heading (d) makes letters bigger
10. 10.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
11. 11.True or false: CSS rounds box corners. (a) True (b) False
12. 12.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="250">
13. 13.💪 Which justify-content value packs boxes at the end? (a) center (b) space-between (c) flex-start (d) flex-end
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
15. 15.📝 How many <input> tags are in this form?
    <form>
      <input type="date">
      <input type="number">
      <input type="checkbox">
      <input type="submit" value="Send">
    </form>
16. 16.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
17. 17.⚡ Which JavaScript word writes in the console? (a) if (b) let (c) console.log() (d) for
18. 18.True or false: HTML on its own cannot make tables. (a) True (b) False
19. 19.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      background-color: yellow;
    } (a) body (b) yellow (c) font-size (d) li
20. 20.Which of these is a strong password? (a) qwerty (b) iloveyou (c) password (d) Rain#Drop_42!
21. 21.🔍 One closing tag is missing. Which one?
    <h2>My pets
    <i>My best friend</i>
    <h1>Fun facts</h1> (a) </i> (b) </em> (c) </h1> (d) </h2>
22. 22.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    p { color: white; }
    p { color: red; } (a) black (b) red (c) green (d) white
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: purple; }
    #top { color: red; } (a) orange (b) red (c) yellow (d) purple
24. 24.🌍 Which one shows the page to you? (a) the browser (b) the server (c) the URL (d) HTTPS
25. 25.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
26. 26.True or false: <li> goes inside ul or ol. (a) True (b) False
27. 27.🌈 In #620000 the red part is the hex number 62. What is it as a normal number?
28. 28.🏷️ What does a closing tag have that an opening tag does not? (a) a slash / (b) a dollar $ (c) a hash # (d) a dot .
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
30. 30.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) cyan (c) red (d) magenta
31. 31.📊 In a table, which tag is a row? (a) <td> (b) <th> (c) <tr> (d) <tb>
32. 32.✍️ In color: blue; which part is the value? (a) ; (b) color (c) : (d) blue
33. 33.📋 What number does the browser show next to “Litchi”?
    <ol start="5">
      <li>Papaya</li>
      <li>Mango</li>
      <li>Grapes</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ol>
34. 34.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
35. 35.📄 Where does <title> go: in the head or in the body? (a) in the head (b) in the body
36. 36.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
37. 37.⚡ What does this code show?
    let name = "Kabir";
    alert("Hi, " + name + "!"); (a) Hi, name! (b) Hi, Kabir! (c) name (d) Kabir
38. 38.🔢 When you open a web page, which comes first: “DNS finds the server” or “the server sends files”? (a) the server sends files (b) DNS finds the server
39. 39.⚡ Which word makes a new variable? (a) make (b) give (c) put (d) let
40. 40.🌈 In #d20000 the red part is the hex number d2. What is it as a normal number?

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