Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 49 · 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 heading shows the BIGGEST text: <h4>, <h5>, <h3> or <h2>? (a) <h5> (b) <h4> (c) <h2> (d) <h3>
2. 2.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   .star { color: red; }
   #top { color: green; } (a) blue (b) green (c) red (d) orange
3. 3.🔗 What does target="_blank" do to a link? (a) makes it blank (b) opens it in a new tab (c) hides the link (d) makes it bold
4. 4.🔍 One closing tag is missing. Which one?
   <h2>I love mangoes.
   <h3>My pets</h3>
   <small>Cricket is fun.</small> (a) </h3> (b) </small> (c) </h2> (d) </h1>
5. 5.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
6. 6.⚡ Which JavaScript word writes in the console? (a) console.log() (b) let (c) alert() (d) if
7. 7.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h4> or <h2>? (a) <h4> (b) <h1> (c) <h6> (d) <h2>
8. 8.🔠 Which heading shows the SMALLEST text: <h1>, <h6>, <h5> or <h3>? (a) <h3> (b) <h1> (c) <h6> (d) <h5>
9. 9.What does font-family do? (a) makes the text bold (b) picks the font style (c) sets the letter colour (d) colours behind the text
10. 10.⚡ Which JavaScript word shows a pop-up box? (a) let (b) if (c) alert() (d) for
11. 11.💪 Which flexbox property sets space between boxes? (a) display: flex (b) align-items (c) justify-content (d) gap
12. 12.True or false: the URL scrambles data on its way. (a) True (b) False
13. 13.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
14. 14.🔗 Which tag makes a clickable link? (a) <p> (b) <link> (c) <img> (d) <a>
15. 15.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) < > (d) ( )
16. 16.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
17. 17.🔍 One closing tag is missing. Which one?
    <i>Fun facts</i>
    <p>Good morning!
    <em>My pets</em> (a) </em> (b) </i> (c) </p> (d) </u>
18. 18.True or false: in <img>, width sets how tall it is. (a) False (b) True
19. 19.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) center (d) space-between
20. 20.True or false: in <img>, height is read by screen readers. (a) True (b) False
21. 21.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <a alt="about.html"> (c) <a href="about.html"> (d) <link about.html>
22. 22.True or false: <caption> gives the table a title. (a) False (b) True
23. 23.True or false: to download from pop-ups is not safe. (a) True (b) False
24. 24.⚡ What number does this code print?
    let apples = 22;
    apples = apples + 9;
    apples = apples - 15;
    console.log(apples);
25. 25.💬 How many paragraphs show on the page?
    <!-- <p>Good morning!</p> -->
    <p>Hello, world!</p>
    <p>Cricket is fun.</p>
    <!-- <p>I love mangoes.</p> -->
    <p>My pets</p>
26. 26.🌍 What is the path in this URL?
    https://learn.example.com/about.html (a) /maths/tables.html (b) /about.html (c) https (d) learn.example.com
27. 27.Which of these is an opening tag? (a) </li> (b) </body> (c) </p> (d) <p>
28. 28.True or false: in <img>, alt describes the picture. (a) False (b) True
29. 29.Which colour pair is easy to read? (a) light grey on white (b) yellow on white (c) red on green (d) white on black
30. 30.🔁 When does the else part run? (a) when if is true (b) always (c) when if is false (d) never
31. 31.📋 How many items does this list show?
    <ol>
      <li>Papaya</li>
      <li>Mango</li>
      <li>Banana</li>
      <li>Guava</li>
      <li>Orange</li>
    </ol>
32. 32.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
33. 33.📄 Where does <link rel="stylesheet"> go: in the head or in the body? (a) in the head (b) in the body
34. 34.🔒 Is the connection to this address scrambled (encrypted)?
    https://school.example.in/art/gallery.html (a) Yes (b) No
35. 35.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
36. 36.📋 How many items does this list show?
    <ol>
      <li>Litchi</li>
      <li>Orange</li>
      <li>Grapes</li>
      <li>Jamun</li>
      <li>Mango</li>
      <li>Guava</li>
    </ol>
37. 37.✍️ What is the selector in this CSS rule?
    h1 {
      font-weight: bold;
      font-size: 20px;
    } (a) p (b) font-weight (c) h1 (d) 20px
38. 38.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
39. 39.📝 Which tag gives a form box a name you can click? (a) <label> (b) <title> (c) <h1> (d) <hr>
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 340px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).

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