Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 125 · 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?
   <h2 class="star" id="top">Hi</h2>
   CSS:
   .star { color: red; }
   .star { color: purple; } (a) red (b) purple (c) black (d) orange
2. 2.📦 In the box model, which part is the gap to other boxes? (a) border (b) margin (c) padding (d) content
3. 3.🎯 Which CSS selector matches this element?
   <h2 class="box" id="top">Hello</h2> (a) li (b) #box (c) h2 (d) .top
4. 4.💬 Why do coders write comments? (a) to make links (b) to add colour (c) to leave notes (d) to show pictures
5. 5.🔁 Which loop repeats code a set number of times? (a) if (b) let (c) else (d) for
6. 6.🎯 Which element does the selector #main style? (a) <li id="main"> (b) <li id="logo"> (c) <div class="star"> (d) <li class="main">
7. 7.True or false: <input type="password"> hides what you type. (a) False (b) True
8. 8.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
9. 9.🌈 Which colour is #0000ff? (a) yellow (b) black (c) bright green (d) blue
10. 10.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
11. 11.🧭 Who is helped most by semantic tags? (a) nobody (b) only the printer (c) screen-reader users (d) only the server
12. 12.🖌️ Where does the text sit on its line?
    h1 {
      background-color: green;
      text-align: right;
      color: blue;
      font-size: 20px;
    } (a) on the left (b) on the right (c) in the middle
13. 13.♿ Does this help everyone, or make the page harder to use: label every form box? (a) makes it harder (b) helps everyone
14. 14.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
15. 15.🖼️ Which attribute of <img> shows if the image fails? (a) height (b) width (c) alt (d) src
16. 16.🔤 In “HTML”, what do the letters HT stand for? (a) HyperText (b) Hot Tags (c) Home Text (d) High Tech
17. 17.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is a game (b) the site is fast (c) the data is scrambled (d) the site is free
18. 18.Which of these is true of a code editor? (a) turns HTML into a page (b) answers page requests (c) hosts websites online (d) shows line numbers
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
20. 20.🔠 Which heading shows the SMALLEST text: <h4>, <h5>, <h1> or <h2>? (a) <h1> (b) <h4> (c) <h5> (d) <h2>
21. 21.🖼️ Does <img> need a closing tag? (a) Yes (b) No
22. 22.🎯 Which sign starts an id selector? (a) # (b) & (c) @ (d) .
23. 23.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
24. 24.True or false: <table> gives the table a title. (a) True (b) False
25. 25.💬 How many paragraphs show on the page?
    <!-- <p>Cricket is fun.</p> -->
    <p>Our school trip</p>
    <p>I love mangoes.</p>
    <p>Good morning!</p>
    <p>Fun facts</p>
26. 26.🔠 Which tag is used for the main title on a page? (a) <p> (b) <br> (c) <h1> (d) <h6>
27. 27.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
28. 28.🚀 What is the home page file of a website usually called? (a) home.css (b) main.png (c) start.js (d) index.html
29. 29.📋 How many items does this list show?
    <ol>
      <li>Orange</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
30. 30.True or false: <ul> is an unordered list. (a) False (b) True
31. 31.🛡️ Online: is it safe to ask before downloading? (a) safe (b) not safe
32. 32.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="150"> (a) Our school bus (b) width (c) The full moon (d) moon.png
33. 33.🌍 What is the path in this URL?
    http://school.example.in/index.html (a) /index.html (b) /art/gallery.html (c) school.example.in (d) http
34. 34.✍️ What value is given to font-weight in this rule?
    .note {
      font-weight: bold;
      border: 2px solid;
      color: red;
    } (a) 300px (b) font-weight (c) bold (d) 2px solid
35. 35.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
36. 36.🔍 One closing tag is missing. Which one?
    <em>Good morning!</em>
    <u>Hello, world!
    <i>Cricket is fun.</i> (a) </i> (b) </em> (c) </u> (d) </strong>
37. 37.🔍 One closing tag is missing. Which one?
    <h3>The red kite</h3>
    <h1>My best friend
    <i>Hello, world!</i> (a) </i> (b) </h3> (c) </small> (d) </h1>
38. 38.⚡ What number does this code print?
    let a = 47;
    let b = 27;
    console.log(a + b);
39. 39.📊 Which tag holds the whole table? (a) <caption> (b) <tr> (c) <table> (d) <td>
40. 40.🔠 Which heading shows the SMALLEST text: <h5>, <h1>, <h4> or <h3>? (a) <h1> (b) <h5> (c) <h3> (d) <h4>

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