Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 503 · 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 JavaScript word shows a pop-up box? (a) console.log() (b) alert() (c) if (d) for
2. 2.⚡ A JavaScript file usually ends with which extension? (a) .html (b) .js (c) .jpg (d) .css
3. 3.🏷️ Which is the closing tag for <small>? (a) </small> (b) <small> (c) <small/> (d) <\small>
4. 4.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
5. 5.🔢 On a typical page, from top to bottom, which comes FIRST? (a) <main> (b) <footer> (c) <header> (d) <nav>
6. 6.⚡ Which word makes a new variable? (a) give (b) let (c) put (d) make
7. 7.Which of these is not safe to do online? (a) log out on shared PCs (b) keep passwords secret (c) type a password on http (d) ask before downloading
8. 8.⚖️ What colour is the text of this element?
   <h2 class="menu" id="top">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: white; } (a) orange (b) white (c) black (d) yellow
9. 9.📊 Where do <td> cells go? (a) inside a <li> (b) inside the <head> (c) inside a <tr> (d) inside a <p>
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 240px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
11. 11.📊 In a table, which tag is a row? (a) <th> (b) <tr> (c) <td> (d) <tb>
12. 12.🔁 How many numbers does this code print?
    for (let i = 0; i < 16; i = i + 3) {
      console.log(i);
    }
13. 13.True or false: <p> is an empty tag. (a) True (b) False
14. 14.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + 2;
    }
    console.log(total);
15. 15.🎯 Which CSS selector matches this element?
    <span class="note" id="main">Hello</span> (a) #note (b) span (c) .main (d) p
16. 16.🖼️ Does <img> need a closing tag? (a) Yes (b) No
17. 17.🔠 Which heading shows the BIGGEST text: <h3>, <h2>, <h5> or <h1>? (a) <h2> (b) <h3> (c) <h5> (d) <h1>
18. 18.✍️ Which property is set to bold in this rule?
    p {
      background-color: yellow;
      font-weight: bold;
      font-style: italic;
      padding: 8px;
    } (a) width (b) font-weight (c) border (d) bold
19. 19.🧭 Is <div> semantic or not semantic? (a) not semantic (b) semantic
20. 20.🎯 Can many elements share the same class? (a) No (b) Yes
21. 21.True or false: <li> is one item of a list. (a) False (b) True
22. 22.🔍 Which is the odd one out? (a) is where we type code (b) stores a website’s files (c) hosts websites online (d) sends pages over the net
23. 23.🔗 Which address opens when you click this link?
    <a href="art.html">About us</a> (a) quiz.html (b) About us (c) news.html (d) art.html
24. 24.💾 A web page file usually ends with which extension? (a) .png (b) .mp3 (c) .txt (d) .html
25. 25.🔠 Which heading shows the BIGGEST text: <h3>, <h2>, <h6> or <h1>? (a) <h1> (b) <h6> (c) <h2> (d) <h3>
26. 26.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
27. 27.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="300">
28. 28.📝 On how many lines does the browser show this paragraph?
    <p>Sky is blue<br>Roses are red<br>Kites fly high</p>
29. 29.🧩 Which language shows a pop-up message? (a) JavaScript (b) CSS (c) HTML
30. 30.True or false: <input type="date"> picks a day. (a) False (b) True
31. 31.True or false: <nav> holds a side box of tips. (a) True (b) False
32. 32.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h1> → <h2> (a) No (b) Yes
33. 33.🔍 Which is the odd one out? (a) makes a form box (b) makes a link (c) makes headings and lists (d) checks a quiz answer
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
36. 36.True or false: HTML on its own can make tables. (a) False (b) True
37. 37.🌗 Is white on black easy or hard to read? (a) easy to read (b) hard to read
38. 38.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 9; i++) {
      total = total + 5;
    }
    console.log(total);
39. 39.🖌️ How big is the text, in px?
    p {
      background-color: white;
      color: red;
      text-align: right;
      font-size: 40px;
    }
40. 40.⚡ What number does this code print?
    let a = 43;
    let b = 30;
    console.log(a - b);

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