Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 827 · 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.📊 Are <th> cells shown bold and centred by default? (a) Yes (b) No
2. 2.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
3. 3.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) : (d) color
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     padding: 8px;
   }
5. 5.🔍 Which line is missing its closing tag?
   line 1: <i>Cricket is fun.
   line 2: <h3>Our school trip</h3>
   line 3: <p>The red kite</p> (a) line 2 (b) line 3 (c) line 1
6. 6.💬 Which text will NOT show on the page?
   <!-- <p>Good morning!</p> -->
   <p>Our school trip</p>
   <p>My best friend</p> (a) Good morning! (b) Our school trip (c) My best friend
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: center;
   }
   Inside are 2 boxes, each 60px wide (no margins).
9. 9.🔗 Which tag makes a clickable link? (a) <link> (b) <img> (c) <a> (d) <p>
10. 10.True or false: “label every form box” makes the page harder to use. (a) False (b) True
11. 11.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    #top { color: purple; } (a) yellow (b) purple (c) blue (d) black
12. 12.🧭 Why use <nav> instead of <div> for a menu? (a) it loads faster (b) it adds pictures (c) it makes text red (d) it tells its meaning
13. 13.Which of these is padding? (a) space outside the border (b) the gap to other boxes (c) the text or picture (d) the gap round content
14. 14.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: yellow; } (a) yellow (b) blue (c) green (d) purple
15. 15.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Guava</td><td>Banana</td><td>Mango</td></tr>
      <tr><td>Banana</td><td>Papaya</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Litchi</td><td>Orange</td></tr>
    </table>
16. 16.🧭 Who is helped most by semantic tags? (a) screen-reader users (b) only the server (c) only the printer (d) nobody
17. 17.🔁 How many numbers does this code print?
    for (let i = 0; i < 9; i = i + 2) {
      console.log(i);
    }
18. 18.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="200"> (a) The full moon (b) width (c) moon.png (d) Our school bus
19. 19.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-start (d) flex-end
20. 20.🌈 Which colour is #000000? (a) yellow (b) magenta (c) black (d) red
21. 21.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Orange</td><td>Papaya</td><td>Banana</td></tr>
      <tr><td>Guava</td><td>Litchi</td><td>Guava</td><td>Mango</td></tr>
    </table>
22. 22.🔢 When you open a web page, which comes first: “DNS finds the server” or “the server sends files”? (a) the server sends files (b) DNS finds the server
23. 23.📝 Which tag holds a whole form? (a) <ol> (b) <table> (c) <input> (d) <form>
24. 24.🔠 Which heading shows the BIGGEST text: <h3>, <h6>, <h1> or <h2>? (a) <h3> (b) <h2> (c) <h6> (d) <h1>
25. 25.🚀 Which program lets you see your web page while you build it? (a) a music player (b) a photo viewer (c) a web browser (d) a calculator
26. 26.Which colour pair is easy to read? (a) white on black (b) red on green (c) yellow on white (d) blue on purple
27. 27.🛡️ Online: is it safe to put secrets in comments? (a) not safe (b) safe
28. 28.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 3; i++) {
      total = total + i;
    }
    console.log(total);
29. 29.⚡ What number does this code print?
    let books = 9;
    books = books + 13;
    books = books - 14;
    console.log(books);
30. 30.🔐 Is Blue@Tiger_74 a strong or a weak password? (a) weak (b) strong
31. 31.True or false: “link text “click here”” helps everyone use the page. (a) False (b) True
32. 32.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="100"> (a) width (b) tiger.jpg (c) A red kite (d) A tiger asleep
33. 33.🔁 What does this code print?
    let age = 50;
    if (age < 30) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
34. 34.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 480px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
35. 35.True or false: to check for https first is not safe. (a) True (b) False
36. 36.True or false: <aside> holds one blog post. (a) False (b) True
37. 37.🔁 Which word runs code only when something is true? (a) for (b) log (c) if (d) let
38. 38.True or false: .star is an element selector. (a) False (b) True
39. 39.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
40. 40.🎯 Which element does the selector .star style? (a) <p class="note"> (b) <span class="menu"> (c) <span id="star"> (d) <span class="star">

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