Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 885 · 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 is the odd one out? (a) checks a quiz answer (b) counts down a timer (c) sets colours and fonts (d) reacts to a button click
2. 2.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the body (b) in the head
3. 3.📄 Which part holds everything you see on the page? (a) the head (b) the doctype (c) the title (d) the body
4. 4.⚖️ What colour is the text of this element?
   <h1 class="red" id="intro">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: green; } (a) white (b) red (c) green (d) black
5. 5.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
6. 6.True or false: .star is a class selector. (a) False (b) True
7. 7.📝 How many <input> tags are in this form?
   <form>
     <input type="email">
     <input type="checkbox">
     <input type="submit" value="Send">
   </form>
8. 8.🔁 What does this code print?
   let marks = 3;
   if (marks >= 19) {
     console.log("Pass");
   } else {
     console.log("Try again");
   } (a) Try again (b) Pass
9. 9.🖼️ Which attribute of <img> shows if the image fails? (a) src (b) alt (c) height (d) width
10. 10.📝 How many paragraphs does this code make?
    <p>Fun facts</p>
    <p>My pets</p>
    <p>Hello, world!</p>
    <p>The red kite</p>
    <p>Good morning!</p>
11. 11.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="cake.jpg" alt="Birthday cake" width="50"> (a) Birthday cake (b) A happy dog (c) cake.jpg (d) width
12. 12.🔗 Which words do you click on?
    <a href="https://example.com">Take the quiz</a> (a) Take the quiz (b) https://example.com (c) href (d) Play games
13. 13.True or false: in <img>, height names the picture file. (a) True (b) False
14. 14.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
15. 15.🔢 In a basic web page file, which comes FIRST? (a) <html> (b) </body> (c) <!DOCTYPE html> (d) </html>
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 5px;
      border: 2px solid black;
      margin: 10px;
    }
17. 17.True or false: <img> goes in the body. (a) False (b) True
18. 18.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
19. 19.🌈 Which colour is #00ff00? (a) yellow (b) bright green (c) cyan (d) blue
20. 20.🏷️ Which is the closing tag for <h2>? (a) </h2> (b) <h2> (c) <h2/> (d) <\h2>
21. 21.Which of these does HTML do? (a) checks a quiz answer (b) shows a pop-up message (c) makes headings and lists (d) counts down a timer
22. 22.📄 Can HTML on its own run a game loop? (a) Yes (b) No
23. 23.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Grapes</td><td>Mango</td><td>Orange</td></tr>
      <tr><td>Mango</td><td>Jamun</td><td>Grapes</td></tr>
      <tr><td>Guava</td><td>Grapes</td><td>Banana</td></tr>
    </table>
24. 24.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
25. 25.💬 Which text will NOT show on the page?
    <!-- <p>Our school trip</p> -->
    <p>Good morning!</p>
    <p>My pets</p> (a) My pets (b) Our school trip (c) Good morning!
26. 26.✍️ What is the selector in this CSS rule?
    h1 {
      margin: 10px;
      padding: 8px;
    } (a) p (b) 8px (c) h1 (d) margin
27. 27.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) nobody (c) only the server (d) only the printer
28. 28.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: red; }
    .menu { color: black; }
    p { color: white; } (a) white (b) red (c) blue (d) black
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-style: italic;
      border: 2px solid;
      font-weight: bold;
    }
30. 30.🔗 Which words do you click on?
    <a href="contact.html">Art corner</a> (a) href (b) contact.html (c) School news (d) Art corner
31. 31.Which of these does CSS do? (a) gives the page structure (b) changes the text size (c) makes headings and lists (d) shows a pop-up message
32. 32.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="colour"> Red
      <input type="checkbox" name="colour"> Green
      <input type="checkbox" name="colour"> Orange
    </form>
33. 33.Which of these goes in the body? (a) <meta charset="utf-8"> (b) <title> (c) <link rel="stylesheet"> (d) <p>
34. 34.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the body (b) in the head
35. 35.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
36. 36.Which of these is a strong password? (a) iloveyou (b) qwerty (c) Mango#Kite29! (d) abcd1234
37. 37.🔠 Which heading shows the BIGGEST text: <h5>, <h1>, <h3> or <h6>? (a) <h5> (b) <h6> (c) <h3> (d) <h1>
38. 38.🔁 Which word runs code only when something is true? (a) for (b) if (c) let (d) log
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
40. 40.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <p> (c) inside a <li> (d) inside a <tr>

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