Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 881 · 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 number does this code print?
   let total = 0;
   for (let i = 1; i <= 3; i++) {
     total = total + i;
   }
   console.log(total);
2. 2.🧩 An opening tag + content + a closing tag together make an ___. (a) address (b) element (c) attribute (d) editor
3. 3.True or false: to post your home address is not safe. (a) False (b) True
4. 4.🖼️ Which attribute of <img> tells which image to load? (a) height (b) alt (c) src (d) width
5. 5.⚡ Which JavaScript word makes a new variable? (a) let (b) alert() (c) for (d) if
6. 6.📊 How many rows does this table have?
   <table>
     <tr><td>Jamun</td><td>Guava</td><td>Mango</td></tr>
     <tr><td>Litchi</td><td>Grapes</td><td>Litchi</td></tr>
     <tr><td>Guava</td><td>Mango</td><td>Mango</td></tr>
     <tr><td>Litchi</td><td>Grapes</td><td>Grapes</td></tr>
   </table>
7. 7.📄 Which part holds everything you see on the page? (a) the title (b) the body (c) the head (d) the doctype
8. 8.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-end (d) flex-start
9. 9.🔢 To build and share your first web page, which comes first: “write the HTML” or “publish it online”? (a) publish it online (b) write the HTML
10. 10.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
11. 11.🔁 How many times does this code print “Hi”?
    for (let i = 3; i <= 5; i++) {
      console.log("Hi");
    }
12. 12.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Banana</td><td>Litchi</td></tr>
      <tr><td>Banana</td><td>Grapes</td></tr>
      <tr><td>Grapes</td><td>Banana</td></tr>
    </table>
13. 13.Which of these is true of a code editor? (a) shows pages from the web (b) opens web pages for us (c) is where we type code (d) hosts websites online
14. 14.📝 Which input type lets you pick only one? (a) date (b) radio (c) number (d) password
15. 15.💬 Why do coders write comments? (a) to add colour (b) to leave notes (c) to show pictures (d) to make links
16. 16.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) space-between (d) flex-end
17. 17.📛 In <a href="x.html">, what is href? (a) a comment (b) an attribute (c) a closing tag (d) an element name
18. 18.🏷️ Is <p> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
19. 19.True or false: #top is a class selector. (a) True (b) False
20. 20.Which of these does HTML do? (a) reacts to a button click (b) gives the page structure (c) changes the page live (d) adds space around boxes
21. 21.🔗 Which address opens when you click this link?
    <a href="art.html">Visit the site</a> (a) Visit the site (b) quiz.html (c) news.html (d) art.html
22. 22.🔁 What does i++ do? (a) doubles i (b) prints i (c) takes 1 from i (d) adds 1 to i
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
24. 24.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
25. 25.📄 What is the first line of an HTML5 page? (a) <body> (b) <head> (c) <!DOCTYPE html> (d) <html>
26. 26.💬 How many paragraphs show on the page?
    <!-- <p>Fun facts</p> -->
    <p>Rain today</p>
    <p>My best friend</p>
27. 27.🔁 Which word runs code only when something is true? (a) for (b) if (c) log (d) let
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    p { color: white; }
    p { color: yellow; } (a) red (b) white (c) orange (d) yellow
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 5px;
      border: 1px solid black;
      margin: 0px;
    }
30. 30.⚡ What number does this code print?
    let score = 27;
    score = score + 19;
    score = score - 43;
    console.log(score);
31. 31.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
32. 32.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) plan what to show (b) test in a browser (c) write the HTML (d) publish it online
33. 33.🔢 On a typical page, from top to bottom, which comes first: “<header>” or “<nav>”? (a) <nav> (b) <header>
34. 34.True or false: <b> is an empty tag. (a) False (b) True
35. 35.🔁 How many times does this code print “Well done”?
    for (let i = 0; i < 9; i++) {
      console.log("Well done");
    }
36. 36.📋 Which list tag shows bullet points? (a) <ul> (b) <li> (c) <ol>
37. 37.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="200"> (a) tiger.jpg (b) fort.jpg (c) An old fort (d) kite.png
38. 38.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    .star { color: yellow; }
    h2 { color: white; } (a) yellow (b) white (c) black (d) orange
39. 39.📋 What number does the browser show next to “Guava”?
    <ol>
      <li>Grapes</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ol>
40. 40.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    .star { color: black; }
    .star { color: white; } (a) purple (b) blue (c) white (d) black

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