Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 514 · 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 does this code print?
   let score = 17;
   if (score > 29) {
     console.log("You win");
   } else {
     console.log("Play again");
   } (a) Play again (b) You win
2. 2.⚖️ What colour is the text of this element?
   <h1 class="big" id="main">Hi</h1>
   CSS:
   h1 { color: yellow; }
   #main { color: blue; } (a) orange (b) blue (c) yellow (d) red
3. 3.🌈 Which colour of light is strongest in rgb(220, 49, 115)? (a) green (b) red (c) blue
4. 4.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) click it twice (b) share it with friends (c) type the password (d) close it, tell an adult
5. 5.True or false: margin is the gap round content. (a) True (b) False
6. 6.💬 How many paragraphs show on the page?
   <!-- <p>Cricket is fun.</p> -->
   <p>The red kite</p>
   <p>Our school trip</p>
7. 7.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   h2 { color: red; }
   h2 { color: orange; } (a) green (b) red (c) yellow (d) orange
8. 8.🔢 On a typical page, from top to bottom, which comes first: “<footer>” or “<main>”? (a) <footer> (b) <main>
9. 9.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes
10. 10.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) content (d) margin
11. 11.🔢 When you open a web page, which comes FIRST? (a) you type the URL (b) the browser asks it (c) DNS finds the server (d) the browser shows it
12. 12.🎯 Which element does the selector .red style? (a) <p class="red"> (b) <p id="red"> (c) <h1 class="star"> (d) <p class="box">
13. 13.🧭 Is <header> semantic or not semantic? (a) semantic (b) not semantic
14. 14.🌗 Is white on dark blue easy or hard to read? (a) hard to read (b) easy to read
15. 15.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) border (d) margin
16. 16.🔗 Which words do you click on?
    <a href="quiz.html">School news</a> (a) School news (b) href (c) quiz.html (d) Take the quiz
17. 17.📦 In the box model, which part is the text or picture? (a) padding (b) border (c) margin (d) content
18. 18.True or false: .big is an element selector. (a) False (b) True
19. 19.🌍 What is the path in this URL?
    http://school.example.in/index.html (a) school.example.in (b) /art/gallery.html (c) http (d) /index.html
20. 20.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Birds sing<br>Stars shine</p>
21. 21.📊 Which tag gives the table a title? (a) <caption> (b) <tr> (c) <table> (d) <td>
22. 22.Which of these is true of <article>? (a) helps you move around (b) holds a side box of tips (c) sits at the bottom (d) holds a news story
23. 23.📋 What number does the browser show next to “Papaya”?
    <ol>
      <li>Jamun</li>
      <li>Papaya</li>
      <li>Grapes</li>
      <li>Mango</li>
    </ol>
24. 24.📊 Which tag makes one data cell? (a) <th> (b) <table> (c) <tr> (d) <td>
25. 25.🌐 Which one colours code to help us? (a) a web browser (b) a web server (c) a code editor
26. 26.Which of these is an empty tag? (a) <ul> (b) <li> (c) <br> (d) <h1>
27. 27.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="300">
28. 28.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Mango</td><td>Banana</td><td>Jamun</td><td>Banana</td></tr>
      <tr><td>Grapes</td><td>Litchi</td><td>Litchi</td><td>Litchi</td></tr>
    </table>
29. 29.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) gap (d) flex-direction
30. 30.True or false: <td> makes one data cell. (a) False (b) True
31. 31.🔢 On a typical page, from top to bottom, what comes right after “<main>”? (a) <header> (b) <nav> (c) <footer>
32. 32.🔗 Which attribute holds the address of a link? (a) id (b) src (c) alt (d) href
33. 33.💬 How many paragraphs show on the page?
    <p>Good morning!</p>
    <p>Hello, world!</p>
    <!-- <p>I love mangoes.</p> -->
    <p>Our school trip</p>
    <p>The red kite</p>
34. 34.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 18; i = i + 3) {
      console.log(i);
    }
35. 35.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 25px;
      border: 4px solid black;
      margin: 20px;
    }
36. 36.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
38. 38.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 5; i = i + 3) {
      console.log(i);
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: purple; } (a) red (b) yellow (c) white (d) purple
40. 40.🔠 How many headings are in this code?
    <h1>The red kite</h1>
    <p>Our school trip</p>
    <p>Rain today</p>
    <h3>The red kite</h3>
    <h3>My best friend</h3>

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